0
500
ViewsReact Router: How to fix BrowserRouter showing the blank screen
I'm new to JS react and I'm currently working on the routing portion of my project. I'm trying to utilize the BrowserRouter function imported from the react-router-dom package. But upon issuing npm start all I get is a blank white screen as seen in image (2). If I directly call my *LandingPage.js with the code I commented out on image (1) it outputs the screen shown in image (3) which is what I'm trying to output with the BrowserRouter method. Am I missing anything?
1.)
2.)
3.)
1 answers
Answer question0
If you have react-router-dom V6, then you have to use Routes and Route both at a time to make it work.
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
And update the App function.
function App() {
return (
<BrowserRouter>
<Header />
<main className="py-1">
<Routes>
<Route path="/" element={<LandingPage/>} />
</Routes>
</main>
</BrowserRouter>
);
}
export default App;
The Documentation has a pretty good example to understand that
Note: If you are using
react-router-domv5 or below then Import and useSwitchinstead ofRoutesfor this purpose,Switchis been depreciated in v6.