What's the proper way to link to a route with parameters?

Question

I have these routes set up in app.js:

import { BrowserRouter, Route, Switch } from 'react-router-dom';

<BrowserRouter>
    <Switch>
        <Route name="overview" exact path="/" component={OverviewPage}  />
        <Route name="details1" exact path="/orders/:orderReference/details1" component={DetailsOnePage}/>
        <Route name="details2" exact path="/orders/:orderReference/details2" component={DetailsTwoPage}/>
    </Switch>
</BrowserRouter>

These routes are called via buttons in a smart component:

import { Link } from 'react-router-dom';

<IconButton aria-label="Details One">
    <Link to="details1" params={{ orderReference: order.orderReference }}>
        <PickingIcon />
    </Link>                
</IconButton>

I would expect this to route to:

http://localhost:3000/orders/my-reference/details1

But it goes to:

http://localhost:3000/details1

Which doesn't exist.

I checked, order.orderReference does indeed contain the value my-reference.

What's wrong with the above code?

Shubham Khatri · Accepted Answer · 2019-02-01 07:37:25Z

1

In your Link to prop you have to provide the complete order path like

<Link to={`/orders/${order.orderReference}/details1`} >
    <PickingIcon />
</Link>

answered Feb 1, 2019 at 7:37

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

2 Comments

kbd Over a year ago

This works, but shouldn't it be possible to navigate by route name?

Shubham Khatri Over a year ago

@Spikee, Route navigation using React router currently works just by path and not name

Collectives™ on Stack Overflow

What's the proper way to link to a route with parameters?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related