我正在使用哈希路由器，我想支持動態路徑（即：）/user/:id。
我這樣做的方式是：
<HashRouter>
<Routes>
<Route index element={<App />} />
<Route path="/user/:id" component={User}/>
</Routes>
</HashRouter>
我也嘗試過使用render：
<Route path="/user/:id" render={(props) => <User {...props} />}/>
但似乎沒有任何效果。
這樣做的正確方法是什么？
uj5u.com熱心網友回復：
你仍然會使用element道具。所有Route組件在 prop 上將其路由內容呈現element為 JSX，即ReactElement.
<Route path="/user/:id" element={<User />} />
我猜您的下一個問題可能是“如何訪問id路由匹配引數？”
為此，請使用組件useParams中的鉤子User。
import { useParams } from 'react-router-dom';
...
const { id } = useParams();
如果User是一個類組件并且不能使用 React 鉤子，則創建一個包裝器組件，它可以將引數作為 props 傳入。
const UserWrapper = () => {
const match = useMatch(); // i.e. match.params
return <User match={match} /> // i.e. this.props.match.params
}
...
<Route path="/user/:id" element={<UserWrapper />} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/415572.html
標籤：