在React-Rout-Dom中声明嵌套路由的方式

Question

我正在使用reactJs并尝试创建一些嵌套路由。下面您可以看到“我的文件”的路由部分：

main.js：

ReactDOM.render(
    <Router>
        <App />
    </Router>,
    document.getElementById('page')
);

App.js：

class App extends Component {
    render() {
        return (
            <div>
                <Header />
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/login" component={Login} />
                    <Route path="/signup" component={SignUp} />
                    <Route path="/contact" component={Contact} />
                    <ProtectedRoute path="/user/profile" component={Profile} />
                    <Route component={NotFound} />
                </Switch>
                <Footer />
            </div>
        );
    }
}

不要问我为什么，但我想创建以下url：

• /注册：注册表格

我在我的App.js文件中添加了这个，它的工作原理是：

<Route exact path="/signup" component={SignUp} />
<Route exact path="/signup/person" component={SignUpPerson} />
<Route path="/signup/person/:id" component={SignUpId} />

但是我想知道这是创建嵌套路由的好方法，还是像下面这样分开路由更好：https://stackoverflow.com/a/43846223/4023379

或者另一种方式？

谢啦

Answer 1

如果页面具有诸如页眉、页脚等公共逻辑/组件，则使用嵌套路由。

若页面不共享相似的逻辑，则使用单独的路由。仅仅因为url以/singup开头并不一定意味着您必须嵌套组件