Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

React router dom cant find rest-like url

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<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 ?

>Solution :

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

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading