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.

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>

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

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.

Answer 4

I find the error, in the HomePage.js component is required the "( )" in return

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

const HomePage = () => {

    return (
     <div>
       Hi
     </div>   
    )

}

export default HomePage;