React Router: How to keep a param in the URL when clicking on a Link

I’m using React Router v5.2 in my project. Browser Router looks like this:

<BrowserRouter>
  <Navbar />
  <Switch>
    <Route path={"/sitemap", "/sitemap/:param?"} exact>
      <Sitemap />
    </Route>
    <Route path={"/", "/:param?"} exact>
      <Home />
    </Route>
    <Route path="/" render={() => <div>404</div>} />
  </Switch>
  <Footer />
</BrowserRouter>

The Link to navigate:

<Link to="/sitemap">Sitemap</Link>

Clicking the link obviously overwrites the param if my URL is like “mysite.com/param” this and turns it into “mysite.com/sitemap”. But my question is, how would I make it “mysite.com/sitemap/param” from the link? I tried adding the history.location.pathname when adding the link, but it would look like “mysite.com/sitemap/sitemap/param” if I press it again…

And when clicking on the home button it should only show again “mysite.com/param”.

Any help would be greatly appreciated!

Answer

You can use useParams() to save params and pass it to other link.

Please refer this link to test the URL.

Advertisement

Answer