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 the path="\" 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

js interview questions