I am trying to to use Routes and Route and when I do its not showing home.js I get a blank white page. do I need to download something because it working fine in my other project but I forgot how I did it before.
this is my app.js code
import "./App.css";
import Home from "./components/Home.js";
import Navbar from "./components/Navbar.js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
function App() {
return (
<div className="App">
<div>
<Routes>
<Route path="/" element={<Home />} exact />
</Routes>
</div>
</div>
);
}
export default App;
and this is my index.js code
import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
and tis is Home.js
import React from "react";
import Navbar from './Navbar.js';
const Home = () => {
const text = "Home";
return (
<div>
<h2>{text}</h2>
</div>
);
}
export default Home;
I think you didn't call the router at the right place.
You should try this instead:
import "./App.css";
import Home from "./components/Home.js";
import Navbar from "./components/Navbar.js";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/" element={<Home />} exact />
</Routes>
</Router>
</div>
);
}
export default App;
Also remove the BrowserRouter inside your index
import * as React from "react";
import * as ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
<App />,
document.getElementById("root")
);
I just did npm install --save react-router-dom and it worked
Routes can only be used as a child of BrowserRouter.Currently, the Routes component inside App.js is a child of div.
BrowserRouter once.A typical approach might be to leave your index.js as-is, such that BrowserRouter is used once to wrap your entire app, and all your routes live directly below it in App, keeping all your routing at the top level.
Inside index.js:
<BrowserRouter>
<App />
</BrowserRouter>
Then, in App.js return all your routes directly (here Routes is a direct child of BrowserRouter):
Inside App.js:
function App() {
return (
<Routes>
<Route path="/" element={<Home />} exact />
</Routes>
);
}
As your app grows in complexity, new routes would be added in App.js, but you wouldn't return any JSX, as this isn't allowed. For example, it might look something like this:
function App() {
return (
<Routes>
<Route path={'/'} element={<Navigation />}>
<Route index element={<Home />} />
<Route path='about' element={<About/>} />
<Route path='shop' element={<Shop/>} />
<Route path='blog' element={<Blog />} />
</Route>
</Routes>
);
}