javascript - Add optional query parameters to a dynamic path using React Router - Stack Overflow

admin管理员组

文章数量:1340287

I'm trying to add an optional query parameter to the end of a path, so the URL would look like this: "/user/1/cars?makeYear=2020" or "/user/1/cars". The relevant Route is defined as follows. I'm unable to find guidance on how to add an optional query parameter to an existing path. For example, the following doesn't work:

<Route path="user" element={<UserScreen />}>
  <Route path=":id/makeYear?" element={<User/>} />
</Route>

Here I'd think that <Route path=":id/makeYear?" element={<User/>} /> will mark makeYear as an optional parameter, but no, doesn't work.

I then thought that I'd access the query parameters directly in the ponent, so given that the URL is "/user/1/cars?makeYear=2020", I can fetch the URL via the useLocation api provided by react-router-dom. However, the query parameter, this doesn't work either as the query parameter is immediately removed from the URL (I'm guessing by react-router).

I'm using react-router-dom (6.2.2).

I'm trying to add an optional query parameter to the end of a path, so the URL would look like this: "/user/1/cars?makeYear=2020" or "/user/1/cars". The relevant Route is defined as follows. I'm unable to find guidance on how to add an optional query parameter to an existing path. For example, the following doesn't work:

<Route path="user" element={<UserScreen />}>
  <Route path=":id/makeYear?" element={<User/>} />
</Route>

Here I'd think that <Route path=":id/makeYear?" element={<User/>} /> will mark makeYear as an optional parameter, but no, doesn't work.

I then thought that I'd access the query parameters directly in the ponent, so given that the URL is "/user/1/cars?makeYear=2020", I can fetch the URL via the useLocation api provided by react-router-dom. However, the query parameter, this doesn't work either as the query parameter is immediately removed from the URL (I'm guessing by react-router).

I'm using react-router-dom (6.2.2).

• javascript
• reactjs
• react-router
• react-router-dom

Share Improve this question Follow edited Apr 11, 2023 at 15:26 Drew Reese 204k1818 gold badges244244 silver badges273273 bronze badges asked Aug 11, 2022 at 22:48 Frosty619Frosty619 1,48944 gold badges2424 silver badges3636 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

react-router-dom doesn't use the queryString for route path matching. Remove the queryString part from the route path prop. Access the query params in the ponent via the useSearchParams hook.

<Route path=":id" element={<User/>} />

...

import { useSearchParams } from 'react-router-dom';

const User = () => {
  const [searchParams] = useSearchParams();

  const makeYear = searchParams.get("makeYear");
  // handle logic based on makeYear

  ...
};

本文标签： javascriptAdd optional query parameters to a dynamic path using React RouterStack Overflow