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

Question

在反应路由器 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

在文档中，明确指出这是不可能的

通常在 React 中，您会将其作为 prop: 传递，但您无法控制该信息，因为它来自 URL。

https://reactrouter.com/docs/en/v6/getting-started/tutorial#reading-url-params

所以，你必须在组件中使用useParams

Answer 2

我不想将useParams()放在组件中，因为这会将它与 URL 紧密耦合。 例如，如果我想在其他地方渲染另一个 ProfileComponent，它的用户名与 URL 中的用户名不同。 它似乎违反了单元测试的最佳实践，除非我能像我的例子那样做。

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

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

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

...

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