React Router 中的多個可選參數

Question

我正在使用 React Router v5。

我遇到了需要支持以下用例的情況。

我有通過/project/1234訪問的 React 組件。 但是，我還需要通過/project/1234/hello和/project/1234/goodbye. 同樣，所有這三個路由都需要導航到同一個 React 組件。

以下代碼不起作用，因為據我了解，如果我導航到/project/1234/goodbye ，react-router 會將其解釋為我將 'goodbye' 作為:hello參數的值傳遞，所以如果我詢問參數以編程方式使用 react-router 的useParams()鈎子本身，我將有錯誤的參數值。

<Route
   path={'project/:context/:hello?/:goodbye?'}
   render={matchProps => <Project {...matchProps}/>}
/>

換句話說，如果導航到/project/1234/goodbye然后執行：

const params = useParams()
console.log(params.hello)

params.hello將返回“再見”

同樣，這也行不通，因為使用數組/project/1234/goodbye將始終首先匹配/project/1234 ，因此我不會使用 react-router 提供的useParams()鈎子傳遞任何參數.

<Route
   path={['project/:context', 'project/:context/:hello?', 'project/:context/:goodbye?']}
   render={matchProps => <Project {...matchProps}/>}
/>

我可以有：

<Route
   path={'project/:context'}
   render={matchProps => <Project {...matchProps}/>}
/>

但是，當我使用 react-router 的useParams()鈎子時，我將無法詢問參數:goodbye或:hello

任何人都知道如何使用 React Router 來實現這一點？ 還是我只需要聲明單獨的路線？

Answer 1

更新

這是基於對要求的更好理解的更新答案。 您似乎希望hello and goodbye實際上是 URL 參數的名稱，以便您可以在渲染組件中獲取它們。

你已經非常接近實現這一目標了。

在我的示例中，我將使用參數名稱var1 （而不是hello或goodbye ），以便通過使用/project/1234/hello訪問您的應用程序，您將獲得{context: "1234", var1: "hello"}和這個 URI /project/1234/goodbye將產生{context: "1234", var1: "goodbye"}

您只需要這條路線：

<Route
      exact
      path={["/project/:context", "/project/:context/:var1"]}
      component={Project}
   />

然后在渲染組件中，您可以訪問 URL 參數，如下所示：

props.match.params

同樣，這也行不通，因為使用數組 /project/1234/goodbye 將始終首先匹配 /project/1234，因此我不會使用 react-router 提供的 useParams() 鈎子傳遞任何參數.

你是絕對正確的，除非你使用exact參數。

這是一個沙箱： https://codesandbox.io/s/react-router-5-forked-1jjwt?file=/src/index.js

Answer 2

如果我正確理解了這個問題，那么您可以這樣做：

<Route path="/project/:context">
    <Project />
</Route>

這是因為您沒有調用確切的路徑。 基本上任何以 /project/:context 開頭的東西都會導航到正確的組件，即使它后面還有 10 個參數。