reactjs - 如何在 React 中使用 HashRouter 处理动态路由？

Question

我正在使用 hashrouter，并且我想支持动态路径(即:/user/:id)。

我的做法是:

<HashRouter>
    <Routes>
        <Route index element={<App />} />
        <Route path="/user/:id" component={User}/>
    </Routes>
</HashRouter>

我还尝试使用渲染:

<Route path="/user/:id" render={(props) => <User {...props} />}/>

但似乎没有任何作用。

执行此操作的正确方法是什么？

Answer 1

您仍然需要使用 element 属性。所有 Route 组件在 element 属性上将其路由内容渲染为 JSX，即 ReactElement。

<Route path="/user/:id" element={<User />} />

我猜您的下一个问题可能是“如何访问 id 路由匹配参数？”

为此，请使用 User 组件中的 useParams Hook 。

import { useParams } from 'react-router-dom';

...

const { id } = useParams();

如果 User 是一个类组件并且无法使用 React hooks，则创建一个包装器组件，该组件可以将参数作为 prop 传入。

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 />} />