React router dom cant find rest-like url-CodePudding

So my website has articles, and user can research articles by location.

I would like to render the found articles at url : /articles?location=:where, but my router isn't able to find the route, and redirects me to not-found.

This is my BrowserRouter

<BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<AboutUs />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/publish-article" element={<WriteArticle />} />
      <Route path="/search-article" element={<Search />} />
      <Route path="/articles/:id" element={<RenderArticle />} />
      <Route path="/articles?location=:where" element={<ArticlesFound />} />
      <Route path="/quizz" element={<Quizz />} />
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route path="/users/:username" element={<UserProfile />} />
      <Route path="/user-settings" element={<ProfileSettings />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  </BrowserRouter>

Does any body know what I am doing wrong ?

CodePudding user response：

You dont setup routes for URL SearchParams, you just extract it in the component like

import { useSearchParams } from 'react-router-dom'
const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("location");

at least in react router v6