React router Link absolute path

Question

I've got a a static menu which can be found on all sides. This menu contains the following routes:

<div className="layout-main">
   <Switch>
      <Route path="/" exact component={Dashboard}/>
      <Route path="/login" exact component={Login}/>
      <Route path="/orders/:id" exact component={OrderPage}/>
      <Route path="/orders" exact component={OrdersPage}/>
  </Switch>
</div>

The links in the side drawer looks like this:

<NavLink to='/'>Dashboard</Navlink>
<NavLink to='orders'>Orders</Navlink>

When I am e.g. on page /orders/3 and I press the NavLink Orders, the page /orders/orders is rendered. My goal is to display the normal /orders route.

What would be an appropriate solution (the menu should be kept global)?

Answer 1

Redirect to /orders instead of orders in your link.

orders without the / is a relative link and will simply update the last part of your url. This type of link is useful for same page navigation.