CODEWITHSUNDEEP
reactjsreact-router
vladCovaliov
vladCovaliov

Reputation: 4403

React-router wrong matching when navigating with Link

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!

Upvotes: 1

Views: 276

Answers (1)

Karol Selak
Karol Selak

Reputation: 4774

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.

Upvotes: 1

Related Questions