sibling routes not working in reactjs

Question

I have a component called Profile and it has two children components Timeline and Friends.

I can route to the timeline component inside profile from any other component like this:

<Link to={{ pathname: '/dashboard/profile/timeline/'+userId}}></Link>

But once I am in this url, after that if I want to route to friends section, which is a sibling to timeline I try routing using this in Profile component

<Route path="/dashboard/profile/:screenId/:userId" component={this.Routing}/>

where Routing function is

Routing =({ match })=>{
    switch(match.params.screenId){
        case "timeline": return <Timeline/>;
        case "friends": return <Friends/>
        default : return <NoMatch/>;
    }
}

But the problem is it is not working, the Routing function is not being triggered when I click on the navlink

<NavLink to={'/dashboard/profile/'  + (tab.url) + '/' + userId} activeClassName="selectedTab">
   <div>{tab.name}</div>
</NavLink>

This navlink is in the Profile component. Any help would be appreciated.

does the url change to the updated Route – Shubham Khatri Jun 12 '18 at 09:49 — Shubham Khatri, Jun 12 '18 at 09:49
@ShubhamKhatri Yes it does change – Saurav Dutta Jun 12 '18 at 09:54 — Saurav Dutta, Jun 12 '18 at 09:54

score 0 · Answer 1 · answered Jun 12 '18 at 09:58

0

You need to pass on the Router props to the component in order for Routing to take place

Routing =({ match, ...rest })=>{
    switch(match.params.screenId){
        case "timeline": return <Timeline match={match} {...rest}/>;
        case "friends": return <Friends match={match} {...rest}/>
        default : return <NoMatch match={match} {...rest}/>;
    }
}

answered Jun 12 '18 at 09:58

Shubham Khatri

270,417
55
406
400

@SubhamKhatri Tried that as well, but it didn't work – Saurav Dutta Jun 12 '18 at 10:09
Where exactly is the Navlink component – Shubham Khatri Jun 12 '18 at 10:10
@SubhamKhatri It is not a component, it is inside a div which is in the Profile component – Saurav Dutta Jun 12 '18 at 10:13
In that case Profile component needs to receive the Router props, you can either make sure you pass them to it or use withRouter, check https://stackoverflow.com/questions/43351752/react-router-changes-url-but-not-view/43352623#43352623 – Shubham Khatri Jun 12 '18 at 10:14

sibling routes not working in reactjs

1 Answers1