React Router V6 shows blank page

Question

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.

Helli

its working fine here – Dermal

I think you should remove import of withRouter from HomePage component and then try otherwise, you need to share screenshot of error. – Arsenite

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. – Valuate

I see no overt issues in the code and suspect it would render without issue if I copy/pasted it into a codesandbox. – Lilongwe

Answer 1

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>

Theodore

Answer 2

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

Note: Routes is not a method of this version

Tenpenny

Answer 3

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.

Repressive

Answer 4

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!

Gurney

Answer 5

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.

Scrutiny

Answer 6

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>
);

Jinnah

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Here

Answer 7

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;

Pelican

Answer 8

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>
);

Stroganoff

Answer 9

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.

Forfar

Answer 10

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.

Eddieeddina

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Here