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