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