這適用于“react-router-dom”：“^5.3.0”
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Api from "./Api";
const api = new Api();
const App = () => {
return (
...
<Router basename="/my-app">
<Switch>
<Route
path="/complete"
render={(props) => <ConfirmationPage {...props} api={api} />}
/>
...
</Switch>
</Router>
升級到“react-router-dom”后：“^6.4.3”
我們嘗試過：
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Api from "./Api";
const api = new Api();
const App = () => {
return (
...
<Router basename="/my-app">
<Routes>
<Route
path="/complete"
element={(props) => <ConfirmationPage {...props} api={api} />}
/>
...
</Routes>
</Router>
但這是行不通的。我們已經通讀了https://reactrouter.com/en/6.4.3/upgrading/v5 但沒有看到如何處理傳入的道具。
uj5u.com熱心網友回復：
在react-router-dom@6路由中，組件作為 JSX傳遞給elementprop，將 props 傳遞給路由組件的作業方式與 React 中的其他任何地方一樣。
例子：
<Router basename="/my-app">
<Routes>
<Route
path="/complete"
element={(
<ConfirmationPage
api={api} // <-- props passed to component
/>
)}
/>
...
</Routes>
</Router>
不再有任何路由道具，因此如果路由組件需要訪問之前提供的內容，它們將需要使用 React 鉤子，即useLocation, useNavigate,useParams等。
附加檔案：
- 為什么
<Route>有一個element道具而不是renderorcomponent？ - 優點
<Route element>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533616.html
標籤：反应反应路由器域
上一篇：產品未顯示，顯示未定義的產品