React路由未正确路由v6

Question

我正试图让路由正常工作，但每当我点击导航栏组件时，它都不会正确地转到应该由路由呈现的组件。

React没有显示错误。只是现在卡住了。

import React from 'react';
import Navbar from './components/Navbar';
import Home from './components/Home.js';
import BlankPage from './components/BlankPage';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
function App() {
return (
<>
<Router>
<Navbar/>
<Routes>
<Route path="/" component={Home}/>
<Route path="/blankpage" component={BlankPage}/>
</Routes>
</Router> 
</>
);
}
export default App;

Answer 1

在react-router-dom v6中，Route中没有component参数，您需要将路由组件传递为Route的elements，并渲染组件，而不仅仅传递参考

从此更改

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

到下面

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

---

参考react路由器dom v6官方文档

Route-一个对象或Route元素，通常具有{ path,element }或<Route path element>的形状。路径是一种路径模式。什么时候如果路径模式与当前URL匹配，则元素将为渲染。