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

Question

我正在使用哈希路由器，我想支持动态路径（即：/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} />}/>

但似乎没有任何效果。

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

Answer 1

您仍然会使用 element 道具。所有 Route 组件将其路由内容呈现在 element 道具上作为 JSX，即 ReactElement.

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

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

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

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

...

const { id } = useParams();

如果 User 是一个 class 组件并且不能使用 React 钩子，那么创建一个包装器组件，可以将参数作为 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 />} />

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

How to handle dynamic routes with HashRouter in React?

reactjs

react-router-dom