When I click on a link, it will update the URL properly. However, the component associated with that route will not appear on screen.
index.js:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
App.js:
function App() {
return (
<div className="App">
<h1>
React Router Tester
</h1>
<Routes>
<Route path="/Home" component = {Home}/>
</Routes>
<Link to="/Home">
Test
</Link>
</div>
);
}
export default App;
The react-router-dom API has changed in the latest versions.
Instead of
<Route path="/Home" component={Home} />
use
<Route path="/Home" element={<Home />} />