I'm having trouble with this simple react routing. The problem is that after I click on "Go to invoices" or "Go to eshop", the URL changes, but the page content remains the same. It only changes if I am at localhost:1234/eshop (or /dashboard) and reload the page.
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
export default function App() {
return (
<Router>
<h1>Default layout</h1>
<Link to="/invoices">Go to invoices</Link>
<Link to="/eshop">Go to eshop</Link>
<Route path="/invoices">
<h2>Invoices page</h2>
</Route>
<Route path="/eshop">
<h2>eshop page</h2>
</Route>
</Router>
);
}
Any ideas how to fix this? edit sandbox here https://codesandbox.io/s/hungry-cloud-i2hui2?file=/src/App.js
It's a clash between React Router and StrictMode.
One possible solution is to place the Router outside of StricMode, in the index.js file itself:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<Router>
<StrictMode>
<App />
</StrictMode>
</Router>
);
You should wrap your Route components with a Switch component.
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
export default function App() {
return (
<Router>
<h1>Default layout</h1>
<Link to="/invoices">Go to invoices</Link>
<Link to="/eshop">Go to eshop</Link>
<Switch>
<Route path="/invoices">
<h2>Invoices page</h2>
</Route>
<Route path="/eshop">
<h2>eshop page</h2>
</Route>
</Switch>
</Router>
)
}