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

Luïs · Accepted Answer · 2020-04-10 08:18:45Z

31

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.

answered Apr 10, 2020 at 8:18

Luïs

2,9334 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SpikeThea Over a year ago

oh my god. thank you! i swear i wouldve been on this for way longer if it wasnt for this answer

Collectives™ on Stack Overflow

React router Link absolute path

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related