Link not routing to component

Viewed 86

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;

1 Answers

The react-router-dom API has changed in the latest versions.

Instead of

<Route path="/Home" component={Home} />

use

<Route path="/Home" element={<Home />} />
Related