Question

在react-router渲染的组件中，我有另一条路由。但是，从这些嵌套路线中，无论实际路径如何，始终仅呈现第一条路线。我阅读了有关更新阻止的信息，并尝试将组件包装到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，但是现在呈现类别目录同时显示“ /”和“ / products”。提前致谢。此处提供示例：https://codesandbox.io/s/github/nomernabis/login-flow-redux。

Answer 1

您正在通过路线false，而不是to中的path

此处有效的实现：https://codesandbox.io/s/mm10x7150p

Content.js

React Router始终在嵌套组件中呈现第一条路线

1 个答案: