react router not rendering the view but url is changing

Asked Jun 09 '18 at 05:07

Active Jun 09 '18 at 05:07

Viewed 766 times

I have two tabs: Profile and Friends and the navlink are as follows

<Navlink to={'/dashboard/profile/'  + (tab.url) + '/' + userId}>{tab.name}</Navlink>

where tab = [{ "name": "Profile", "url": 'timeline' }, { "name": "Friends", "url": 'friends' }]

Inside my render() I have route defined as

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

where screenId is Timeline/Friends depending on which tab is clicked

and the Routing function is

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

So the problem is whenever any tab is being selected, the url changes but the Routing function is not triggered so as a result the route is not working. Basically anything after /dashboard/profile/ doesn't work.

I also tried this inside my render():

<Switch>
  <Route path="/dashboard/profile/timeline/userId" component={Timeline}/>
  <Route path="/dashboard/profile/friends/userId" component={ContactUs}/>
</Switch>

But then also it is not working and the problem remains. Any help would be appreciated.

asked Jun 09 '18 at 05:07

Saurav Dutta

You would write your Route like ` ` – Shubham Khatri Jun 09 '18 at 05:26
@ShubhamKhatri Tried that as well but didn't work – Saurav Dutta Jun 09 '18 at 05:30
In the component where you have specified Navlink, do you pass the Route props – Shubham Khatri Jun 09 '18 at 05:31
@ShubhamKhatri For that I used render, }/> – Saurav Dutta Jun 09 '18 at 05:36
which exactly is the issue, you need to write `}/>` Check https://stackoverflow.com/questions/43351752/react-router-changes-url-but-not-view/43352623#43352623 – Shubham Khatri Jun 09 '18 at 05:39
@ShubhamKhatri Tried all the solutions, but I am afraid it doesn't work – Saurav Dutta Jun 09 '18 at 05:45
Can you please make a reproducible demo of your problem on codesandbox or jsfiddle – Shubham Khatri Jun 09 '18 at 05:56

react router not rendering the view but url is changing

0 Answers0