React router always renders first route in nested component

Question

In the component rendered by react-router i have another routes. However, from these nested routes always only first route is rendered regardless actual path. I read about update blocking and tried to wrap components into withRouter() but it didnt help.

I read about update blocking and tried to wrap components into withRouter() but it didnt help. Reordering routes gives the same behavior.

App.js

class App extends Component{
    render() {
        return (
            <div>
                <Router>
                    <Switch>
                        <Route path="/login" component={Login} />
                        <PrivateRoute path="/" component={Main}  />
                    </Switch>
                </Router>
                <Modal />
            </div>
        )
    }
}

Main.js

class Main extends Component{
    render(){
        return (
            <div className="full-height flex-container flex-column">

                <div style={{display: "flex", flexDirection: "row", height: "100%"}}>
                    <NavigationBar items={[{name: 'Categories', route: '/'}, {name: 'Products', route: '/products'}]} />
                    <Content />
                </div>
            </div>
        )
    }
}

Content.js and problematic routes itself

class Content extends Component{
    render(){
        return(
            <div style={{ width: "100%"}}>
               <Switch>
                    <Route exact to="/" component={CategoriesPage} />
                    <Route to="/products" component={ProductsPage} />
               </Switch>
            </div>
        )
    }
}

I expect for path "/" - CategoriesPage to be rendered, and for "/products" - ProductsPage, but now CategoriesPage rendered for both "/" and "/products". Thanks in advance. Sample available here: https://codesandbox.io/s/github/nomernabis/login-flow-redux.

How are you navigating?, Though links or though URL. Is the URL changing? — Shubham Khatri
Yes url is changing. I tried navigating both through the links, that triggers this.props.history.push(), and typed directly into browser url. Behavior is the same. — pavel
Try <Route component={Content} /> instead of <Content /> and see if it changes anything. Apart from it your code looks fine to me — Shubham Khatri
In your Content class, replace to, use path instead. Does it solve your problem ? — R.Duteil

wmp224 wmp224 · Accepted Answer · 2019-01-28T13:58:42

You're passing your routes to instead of path in Content.js

working implementation here: https://codesandbox.io/s/mm10x7150p

    <Switch>
      <Route exact path="/" component={CategoriesPage} />
      <Route exact path="/products" component={ProductsPage} />
    </Switch>

React router always renders first route in nested component

1 Answers