React-router wrong matching when navigating with Link

Question

I have the following routes:

function getModalRoutes() {
  return (
    <Route component={ ModalContainer }>
      <Route path='login' component={ SessionContainer }/>
      <Route path='registration' component={ RegistrationContainer } />
    </Route>
  );
}

<Provider store={ createStoreWithState() }>
  <Router history={ browserHistory }>
    <Route path="/object/:object_id/" component={ ShowRoute } >
      { getModalRoutes() }
    </Route>
    <Route path="/" component={ IndexRoute } >
      { getModalRoutes() }
    </Route>
  </Router>
</Provider>

If I access /object/1/login the matching works correctly. If I use a link like the one below for navigation, from /object/1/ page, the /login route is matched instead of /object/:object_id/login.

<Link
  to={ `login` }
  className="btn">
  Log In
</Link>

Is there a different way to use the Link for this scenario? I feel like I am missing something here.

Thanks!

JohnAllen · Accepted Answer · 2017-09-14 04:31:48Z

1

You should change your login link to /object/1/login. You can also parameterize it like /object/${number}/login. In general, when you navigate inside your app with links like /your_link, you always get to http://yourdomain.sth/your_link.

edited Sep 14, 2017 at 4:31

JohnAllen

7,5609 gold badges46 silver badges67 bronze badges

answered Feb 5, 2017 at 10:49

Karol Selak

4,8848 gold badges42 silver badges69 bronze badges

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

Collectives™ on Stack Overflow

React-router wrong matching when navigating with Link

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related