I am facing a problem. I am trying to use React Router but it keeps showing me a blank page. Here is my code:

App.js:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "./HomePage";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
      </Routes>
    </Router>

  );
};

export default App;

HomePage.js:

import React from "react";
import {withRouter} from "react-router-dom"

const HomePage = () => {

    return <div>hi</div>
}

export default HomePage;

index.js:

import React from "react";
import ReactDom from "react-dom";
import App from './App';


ReactDom.render(<App/>, document.getElementById("root"))

I've installed "React Router V6", can anyone tell me what is the problem? Thanks for all the helpers.

I am facing a problem. I am trying to use React Router but it keeps showing me a blank page. Here is my code:

App.js:

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import HomePage from "./HomePage";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
      </Routes>
    </Router>

  );
};

export default App;

HomePage.js:

import React from "react";
import {withRouter} from "react-router-dom"

const HomePage = () => {

    return <div>hi</div>
}

export default HomePage;

index.js:

import React from "react";
import ReactDom from "react-dom";
import App from './App';


ReactDom.render(<App/>, document.getElementById("root"))

I've installed "React Router V6", can anyone tell me what is the problem? Thanks for all the helpers.

• javascript
• reactjs
• react-router
• react-router-dom

• its working fine here – MWO Commented Feb 5, 2022 at 13:18
• I think you should remove import of withRouter from HomePage component and then try otherwise, you need to share screenshot of error. – Gulshan Aggarwal Commented Feb 5, 2022 at 13:46
• 1 check the browser console for errors. usually if there is a "blank page" it means there was some type of exception thrown and it should show up in the console. – tromgy Commented Feb 5, 2022 at 14:27
• I see no overt issues in the code and suspect it would render without issue if I copy/pasted it into a codesandbox. – Drew Reese Commented Feb 6, 2022 at 0:13

10 Answers 10

use

import { Route, HashRouter as Router, Routes } from "react-router-dom";

 <Router>
  <Routes>
    <Route exact path="/" element={<Main />} />
    <Route path="/download" element={<Download />} />
  </Routes>
</Router>

I downgraded the react-router-dom package version to ^5... And it worked for me.

Note: Routes is not a method of this version

I had the exact same issue happen to me a couple of times. My code is exactly similar to yours. Open the package.json file in your project folder and make sure you've installed react-router-dom in the actual project folder and not in its parent folder.

Same happened with me last night, possibly you have not installed react-router-dom in your project folder, try:

cd [Project Folder name]

npm i react-router-dom

This works for me!

I had the same problem because I was using a (Create React App) CRA generated application and there were older dependencies and one of them was react-router-dom. If that's the case you might need to update your dependencies

npm update

or

yarn upgrade

These commands will update the packages in your project to the latest versions that satisfy the specified version range in your package.json file.

But you can update react-router-dom specifically like so

// Using npm

npm update react-router react-router-dom

or

// Using Yarn

yarn upgrade react-router react-router-dom

Let me know what works cause this gave me a headache too.

import { Routes,Route } from 'react-router-dom';
import Login from 'components/Login';
import Headerfrom 'components/Header';
    
function App() {
      return (
        <div className="App">
          <Header />
          <Routes>
            <Route exact path='/' element={<Login />} />
          </Routes>
       
       
        </div>
      );
    }
    
    export default App;

Above codes are for App.js file then in index.js it have to look like this

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
  </React.StrictMode>
);

I faced a similar kind of issue when introduced react router 6^ version. There was two things to be noticed.

1. It might be that you have not dicleared a basename in your in your or tags depending on how you import it. For this you can access yopur project on http://localhost:3000 insteed of http://localhost:3000/my-app assuming "my-app" is your application name.

2. To access your code at http://localhost:3000/my-app the following code snipet can be used where we needed to provide 'basename' prop like basename="/my-app" in the <Router> tag to provide a base URL path for all the locations in the application.

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import LoginPage from './LoginPage';

function App() {
  return (
    <Router basename="/my-app">
      <Routes>
        <Route path="/" element={<LoginPage />} />
      </Routes>
    </Router>
  );
}

export default App;

Change your index.js because it doesn't have a router. It should look something like this.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App/>
    </Router>
    
  </React.StrictMode>
);

I ran into this problem today. After some investigation, I found out that I was install react-router-dom in the parent folder of my ReactJS project.

Something like this "C:\parent_foleder\reactjs_app", you can turn on terminal app, cd into parent_folder, and then ls -a to see if there is any node_moudles, package.json and package-json.lock; if those things existing in parent_folder, just delete them, then cd into your reactjs_app and run npm i react-router-dom again.

you have done a silly mistake. 1 go to package to json is there react-route-dom 2-if not install it in your project folder. you may have created a folder on desktop like npx create-react-app router and after that you had had installed the react-router-dom. just go cd yourprojectname and install.