在 React-Router-Dom 中声明嵌套路由的方式答案

【问题标题】：Which way to declare nested routes in React-Router-Dom在 React-Router-Dom 中声明嵌套路由的方式
【发布时间】：2019-08-26 00:20:11
【问题描述】：

我正在使用 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>
        );
    }
}

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

/signup : 注册表单
/signup/person : 注册表格第 2 部分
/signup/person/:id : 注册用户id信息

我在我的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

或者其他方式？

谢谢

【问题讨论】：

这主要是基于意见的最佳方法。任何一个都可以正常工作。

标签： javascript reactjs react-router-dom nested-routes

【解决方案1】：

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

如果页面不共享类似的逻辑，则使用单独的路由。仅仅因为 url 以 /singup 开头，这并不意味着你必须嵌套你的组件

【讨论】：