1

Using React Router Dom V6 Have MainView that has two optional parameter like,

  1. id, this time, "key" is not exist
  2. key, this time, "id" is not exists

Both paths points to same view, just need key or id distinguish params

Trying to achieve using below way but, it does not fall under 'key' path. So, while using, const {id, key} = useParams(); key remains undefined.

<Routes>
  <Route path="/mainview">
    <Route path="/id" element={<MainView />} />
    <Route path="/key" element={<MainView />} />
  </Route>
</Routes>

Could you please guide how can it be achieve so, either of path can be supported.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
user3711357
  • 1,425
  • 7
  • 32
  • 54

1 Answers1

1

You are not actually assigning a dynamic path segment. You should name the path parameter. Since both "/:id?" and "/:key?" would resolve to the same path for matching, only one route will work.

Example:

<Routes>
  <Route path="/mainview">
    <Route path=":id?" element={<MainView />} />
  </Route>
</Routes>

const { id } = useParams();

Please also note that optional path parameters were only reintroduced into react-router in v6.5, so if you are actually needing optional path params you'll need to ensure you are on react-router@6.5 or later.

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
  • Does it mean, I have to query params ?, Just because, I need , "key" and "id" separately in view component so, it can process based on parameter. – user3711357 Mar 15 '23 at 21:37
  • 1
    @user3711357 No, the `"?"` here designates the `id` path parameter as optional. As I stated in the answer, there's no difference between using `":id"` and `":key"`, they have the same path rank score and can't both be used at the same time for the same path segment. Are you wanting, or trying, to use queryString params in addition to path parameters? – Drew Reese Mar 15 '23 at 21:40
  • Ok. Any other way, because, using `:id?` this way, in `MainView`, I only receive, 'id' as parameter so, I am not able to distinguish. To add, `id` and `key` both are guid value but processing is different for different entities. So trying to receive `id` or `key` parameter separately. – user3711357 Mar 16 '23 at 00:50
  • 1
    @user3711357 What are you trying to do? You can only give one path segment one param name. You can't use both `id` and `key` for the same path segment. If you need a path with both then they both need to be part of the path, e.g. `"/mainview/:id/:key"`, or you can keep one in the URL path and pass the other in the queryString, or pass both in the queryString. – Drew Reese Mar 16 '23 at 00:57
  • Ok got it. caller will only send either of one param but, MainView needs to identify , is it key or id. So, as per suggestion, is it like, `} />` (no any path params). When navigate to 'MainView', pass query parameter `?id OR ?key` and read query parameters using, `useSearchParams()` ? (Seems, `useParam()` not work). – user3711357 Mar 16 '23 at 01:08
  • 1
    @user3711357 Correct, if you pass any values in the queryString you'll use the `useSearchParmams` to access, e.g. `"/mainview?id=someValue"`, `const [searchParams] = useSearchParams();` and `const id = searchParams.get("id"); // "someValue"`. – Drew Reese Mar 16 '23 at 01:52
  • 1
    Thanks. This works with query Params. Understand, as both are single string path param, it can’t distinguish in path. – user3711357 Mar 16 '23 at 23:50