React and React-Route Link Parameters Not Working

Question

I am new to React and React Router, and I'm struggling quite a bit to understand several things, so I'm open to as much education as you are willing to provide. I'm not able to make this work with multiple parameters. I was able to make it work with a single parameter, but not multiple. I get the Whoops404 component. I assume I'm doing something obvious wrong.

My Route:

 <Router history={ hashHistory }>   
        <Route path='/' component={ Home } />
        <Route name='details' path='/details/:id:name' component={ Details }/>
        <Route path='*' component={ Whoops404 }/>
 </Router>

My Link:

 <Link to={`/details/${adv.id}/${adv.name}`}>
      <h1 className="clickTitle">{adv.name}</h1>
 </Link>

The Component I'm targeting:

export class Details extends Component {
    constructor(props, context) {
        super(props, context);

        console.log(props);
        this.state = {

        };
    }

Thanks in advance.

Andy Ray · Accepted Answer · 2016-12-31 22:28:56Z

1

Change it to path='/details/:id/:name' since you're linking to a route with a slash in it.

answered Dec 31, 2016 at 22:28

Andy Ray

32.3k16 gold badges114 silver badges151 bronze badges

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

1 Comment

Danny Ellis Jr. Over a year ago

That was it. I just couldn't see it. Thanks very much!

Collectives™ on Stack Overflow

React and React-Route Link Parameters Not Working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related