React router v6 访问路由参数并作为 props 传递

Question

在react router v6中，如何将路由参数传递给组件而不需要useParams()在组件中使用？

这就是我想做的：

<Route
  path='/'
  element={ProfileComponent username={'thedefault'}
/>
<Route
  exact
  path='/u/:username/'
  render={(props) => 
    <ProfileComponent username={props.match.params.username}/>
  }
/>

我不想放入useParams()该组件，因为这会将其与 URL 紧密耦合。例如，如果我想在其他地方渲染另一个 ProfileComponent，并且使用与 URL 中的用户名不同的用户名，该怎么办？这似乎违反了单元测试的最佳实践，除非我可以像我的示例那样做到这一点。

Answer 1

我不想放入useParams()该组件，因为这会将其与 URL 紧密耦合。例如，如果我想在其他地方渲染另一个 ProfileComponent，并且使用与 URL 中的用户名不同的用户名，该怎么办？这似乎违反了单元测试的最佳实践，除非我可以像我的示例那样做到这一点。

任何使用username路由匹配参数的路由仍然可以通过钩子访问useParams，但我想我明白你在做什么。如果我正确理解你的问题，你会问如何以通用方式将路由匹配参数映射到组件道具。

为此，您可以简单地使用包装器组件“sip”路由匹配参数并将其传递到任何特定 prop 上的组件。

const ProfileComponentWrapper = () => {
  const { username } = useParams();
  return <ProfileComponent username={username} />;
};

...

<Route
  path='/u/:username/'
  element={<ProfileComponentWrapper />}
/>