链接不路由到组件

Question

当我单击链接时，它将正确更新URL。但是，与该路由关联的组件不会出现在屏幕上。

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;

Answer 1

React-Router-dom API在最新版本中已更改。

而不是

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

使用

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