Fixing React Router BrowserRouter Showing Blank Screen
React router dom blank page Solution, React Router BrowserRouter is used to show different pages of single page application without refreshing page.
If you configured route in wrong way it will show you blank screen
or blank page
.
You may be clueless why its happening but culprit is wrong markup or configuration behind that blank screen
.
If you are facinf this issue in React Router V6 we can guide with correct configuration.
How to import react-router-v6
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
How to implement react-router-v6
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
function App() {
return (
<BrowserRouter>
<main>
<Routes>
<Route path="/" element={<HomePage/>} />
</Routes>
</main>
</BrowserRouter>
);
}
export default App;
Note: If you are using react-router-dom v5 or below then import and use Switch
instead of Routes
for this purpose, Switch
is been depreciated in v6
.
Point to be take care
- Make sure to import correct components
- make sure to use
BrowserRouter
at top level - make sure to wrap all your route inside
Routes
- make sure at least to add one
Route
with thepath="\"
as main entry point
If you are using nested routes and seeing blank screen
it means either you missed correct path information or you did not nested routes correctly. Just take a look with paths and nesting again to solve this issue.
If you take care above point you definitely can deal with blank screen
issue.
Related Articles
- Import statement and Babel
- should I choose reactjs+f7 or f7+vue.js?
- Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- .tsx webpack compile fails: Unexpected token <
- React-router: Passing props to children
- ListView.DataSource looping data for React Native
- React Native with visual studio 2015 IDE