React router всегда рендерит первый маршрут во вложенном компоненте

Question

В компоненте рендеринга реакции-маршрутизатора у меня есть другие маршруты.Однако из этих вложенных маршрутов всегда отображается только первый маршрут независимо от фактического пути.Я читал о блокировке обновлений и пытался обернуть компоненты в withRouter (), но это не помогло.

Я читал о блокировке обновлений и пытался обернуть компоненты в withRouter (), но это не помогло.Переупорядочение маршрутов дает такое же поведение.

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 и сам проблемный маршрут

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

Я ожидаю, что путь "/" - CategoriesPage будет отображен, а для "/ products" - ProductsPage, но теперь CategoriesPage отображается как для "/", так и для "/ products".Заранее спасибо.Образец доступен здесь: https://codesandbox.io/s/github/nomernabis/login-flow-redux.

Answer 1

Вы проходите свои маршруты to вместо path в Content.js

рабочая реализация здесь: https://codesandbox.io/s/mm10x7150p

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