I am starting a new project in order to learn repo. At first, it's a very basic structure.
This is the code which will handle routing in my app
import {BrowserRouter, Routes, Route} from 'react-router-dom'
import Main from './pages/main'
import Repo from './repos'
export default function RouteManager(){
return(
<BrowserRouter>
<Routes>
<Route exact path="/" component ={Main}/>
<Route exact path="/repo" component ={Repo}/>
</Routes>
</BrowserRouter>
)
}
In theory, it should redirect to two disntict pages
Main page
import React from 'react'
export default function Main(){
return(
<h1>Main</h1>
)
}
And there's also a repo page
import React from 'react'
export default function Repos(){
return(
<h1>Repos</h1>
)
}
And here's the App file
import React from 'react'
import RouteManager from './routes'
function App() {
return (
<RouteManager/>
);
}
export default App;
The index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
However, when testing the redirect tool, it shows me only a blank page. What could be wrong
The index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
In v6 of react-router the Route components no longer have a component parameter. It is now called element and takes jsx, see https://reactrouter.com/docs/en/v6/api#routes-and-route.
Try:
export default function RouteManager(){
return(
<BrowserRouter>
<Routes>
<Route exact path="/" element={<Main />}/>
<Route exact path="/repo" element={<Repo />}/>
</Routes>
</BrowserRouter>
)
}
Related
I just discovered the react-router and I decided to try it out
but I keep having this error and my code refused to work.
This is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script src="..//src/index.js"></script>
</body>
</html>
This is my index.js file
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import css from './App.css'
function Web(){
return(
<div>
<App/>
</div>
)
}
ReactDOM.render(<Web/>, document.getElementById('root'))
This is my app.js file
import { BrowserRouter, Route, Router, Routes} from 'react-router-dom'
import './App.css';
import react from 'react'
import ReactDOM from 'react';
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<div>fhhthrtytt</div>}/>
</Routes>
</BrowserRouter>
);
}
This is the error I'm getting in the console
Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I suspect it's the extraneous script tag trying to run your index.js file. It doesn't appear to be necessary here.
<body>
<div id="root"></div>
<script src="..//src/index.js"></script> // <-- remove this
</body>
Should be:
<body>
<div id="root"></div>
</body>
The issue I'm encountering concerns a basic react app (v6). More specifically it is related to routing.
I've gone through several questions/answers on stackoverflow already but wasn't able to figure out what's wrong.
Here's what I'm working with.
App.js
import "./App.css";
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import NavBar from "./components/NavBar";
import Home from "./pages/Home";
import About from "./pages/About";
import PrivacyPolicy from "./pages/PrivacyPolicy";
import TermsOfService from "./pages/TermsOfService";
const App = () => {
return (
<BrowserRouter>
<NavBar/>
<Routes>
<Route path="/" element = {<Home/>} />
<Route path="/home" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/privacyPolicy" element={<PrivacyPolicy />} />
<Route path="/termsOfService" element={<TermsOfService />} />
</Routes>
</BrowserRouter>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.ico" /> <!-- Used to be "%PUBLIC_URL%/favicon.ico" >> might be required when live -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Genesis platform for financial education." />
<meta name="keywords" content="Genesis" class="next-head" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Genesis</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
</div>
</body>
</html>
And here is the error message when pressing the F5 (refresh) button in a browser window.
The buttons in the NavBar work well to navigate to the different pages, but the refresh leaves me hanging...
From the research I've done I feel like the solution is somewhere within these files, but I just can't figure out what to change.
In SPAs, you need to send all the traffic to index.html. You can do it by adding a _redirects file in the root folder and add this:
/* /index.html 200
In the server, this serves index.html to all the requests, and React handles the routing in the browser.
If you used CRA for this, put the _redirects file in the public folder.
I want use React-bootstrap to use Bootstrap 5 with React.js.
I installed the latest version of node.js, bootstrap and React-bootstrap, but if the page is rendered, I only get a white page. I also tried to including the Bootstrap CSS via CDN link, but as soon as I include one component of React-bootstrap in my App.js file, the page will be white and also when inspecting the page, nothing is rendered. Vanilla bootstrap is working by the way. What am I missing?
App.js:
import React, { useState } from 'react';
import Toast from 'react-bootstrap/Toast';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';
import './App.css';
const ExampleToast = ({ children }) => {
const [show, toggleShow] = useState(true);
return (
<>
{!show && <Button onClick={() => toggleShow(true)}>Show Toast</Button>}
<Toast show={show} onClose={() => toggleShow(false)}>
<Toast.Header>
<strong className="mr-auto">React-Bootstrap</strong>
</Toast.Header>
<Toast.Body>{children}</Toast.Body>
</Toast>
</>
);
};
const App = () => (
<Container className="p-3">
<Container className="p-5 mb-4 bg-light rounded-3">
<h1 className="header">Welcome To React-Bootstrap</h1>
<ExampleToast>
We now have Toasts
<span role="img" aria-label="tada">
🎉
</span>
</ExampleToast>
</Container>
</Container>
);
export default App;
index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Versions:
Node.js: v16.16.0
Bootstrap: 5.2.0
React-bootstrap: 2.5.0
Google Chrome: 104.0.5112.80
EDIT 11.08.2022: With Bootstrap 4 and React-bootstrap 1.0 it seems to work.
On going through multiple DOCs I get to know that index.html file is the entry point for a React application and all the components we load overrides this file. But if I am making changes to the index.html file that is not reflected in the web page. I am working on integrating Zoom SDKs which needs to include script tags inside the index.html or else JQuery errors are thrown to the console.
Contents of my public/index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.0/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.0/css/react-select.css" />
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://source.zoom.us/1.7.2/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.7.2/lib/vendor/lodash.min.js"></script>
<script src="https://source.zoom.us/zoom-meeting-1.7.2.min.js"></script>
</body>
</html>
My index.js configuration:
import React from 'react';
import ReactDOM from 'react-dom';
import {
Redirect,
HashRouter as Router,
Route,
Switch
} from 'react-router-dom';
import { Provider } from 'react-redux';
import { setStore } from './store/base';
import configureStore from './store/configureStore';
import './App.scss';
import MeetingRoom from './containers/MeetingRoom/MeetingRoom';
export const store = configureStore({});
setStore(store);
const routes = (
<Provider store={store}>
<Router>
<Switch>
<Route component={MeetingRoom} path='/m/:mid/' />
</Switch>
</Router>
</Provider>
);
ReactDOM.render(routes, document.getElementById('root'));
If I am changing the text inside <noscript> tag i.e You need to enable JavaScript to run this app. to some other string but it is not getting reflected in the web page. So how my index.html is getting loaded I cannot figure out. Is there any other information I need to provide for getting the solution?
The HTML noscript element defines a section of HTML to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser. Add some string inside div element to see on the webpage
Well, honestly I didn't know how to make the question, sorry. But the thing is. I'm making something with react and php backend, but when I run the server with "sudo php artisan serve" nothing appears, that is because it's taking a wrong "app.js" this is some of my code:
app.js
require('./bootstrap');
import React from 'react';
import {render} from 'react-dom';
import {Router, Route, browserHistory} from 'react-router';
import Master from './components/Master';
import CreateProduct from './components/CreateProduct';
import DisplayProduct from './components/DisplayProduct';
import UpdateProduct from './components/UpdateProduct';
render(
<Router history={browserHistory}>
<Route path="/" component={Master} >
<Route path="/add-item" component={CreateProduct} />
<Route path="/display-item" component={DisplayProduct} />
<Route path="/edit/:id" component={UpdateProduct} />
</Route>
</Router>,
document.getElementById('crud-app'));
welcome.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 5.5 ReactJS CRUD</title>
<!-- <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"> -->
</head>
<body>
<div id="crud-app"></div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
as I say when I run the server it takes a "app.js" that is in "proyect/public/js/app.js" however the file I want to appear is in "proyect/resources/js/app.js" how can I do to get the file I want?
Take a look at this question and answers given:
How to include CSS in laravel 5 running with artisan?
Basically your asset files should be in public folder as your public folder is root folder when you run your server with serve command.