vladCovaliov vladCovaliov - 4 years ago 98
React JSX Question

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!

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download