如何使用 props 在 react router v6 中添加元素

Question

在react router V6中，我们这样写路由-

<BrowerRouter>
  <Routes>
    <Route path="..." element={<div> ... </div>} />
    <Route path="..." element={<div> ... </div>} />
  </Routes>
</BrowerRouter>

现在，如果我想插入一个依赖于 props 的元素，比如一个名称数组（定义为另一个组件），那么在 React 路由器的旧版本中，可以使用内联函数将 props 传递给元素但我的问题是我们如何在 V6 中做同样的事情？

Answer 1

如果您指的只是在此级别提供给组件的随机道具，您可以这样做：

<BrowerRouter>
  <Routes>
    <Route path="..." element={ <div> <MyComponent namesList={["John Doe"]} /></div> } />
    <Route path="..." element={ <div> ... </div> } />
  </Routes>
</BrowerRouter>

如果你想在你的组件中使用路由器道具，你可以使用组件中的 useLocation、useNavigate 或 useParams 钩子来实现。

另一种选择是像这样创建一个 HOC：

import {
  useLocation,
  useNavigate,
  useParams,
} from "react-router-dom";

function withRouter(Component) {
  function ComponentWithRouterProp(props) {
    let location = useLocation();
    let navigate = useNavigate();
    let params = useParams();
    return (
      <Component
        {...props}
        router={{ location, navigate, params }}
      />
    );
  }

  return ComponentWithRouterProp;
}

然后像这样在你的组件上使用它：

const MyComponent = (routerProps) => (...)

export default withRouter(MyComponent)

如何使用 props 在 react router v6 中添加元素

How to add elements in react router v6 with props

reactjs

react-router

react-router-dom