了解嵌套路由如何在 react-router 中工作答案

【问题标题】：Understanding how nested routes work in react-router了解嵌套路由如何在 react-router 中工作
【发布时间】：2017-07-17 15:28:44
【问题描述】：

我真的很难理解嵌套路由如何与 react-route 一起工作。我已经查看了许多类似的问题，但我无法让事情发挥作用。

我的目标是让子组件在它们的父组件中显示，并通过相应的 url /parent/child 进行访问。

我有这个配置：

<Router history={browserHistory}>

   <Router path="/" component={App}>

       <IndexRedirect to="/welcome" />

       <Route path="/welcome" component={WelcomePage} />

       <Route path="/services" component={ServiceView}>
            <Route path="new" component={AddServiceView} />
       </Route> 

   </Router>
</Router>

所以我在浏览器中输入这个 url "/"，WelcomePage（嵌套在 App 组件中）正确显示。当我输入"/services" 时，ServiceView 正确显示（嵌套在 App 视图中）。下面是 ServiceView 组件的简化布局：

<div>
     <Header>
        Services
     </Header>    
     {this.props.children}   
     <Footer />       
</div>

现在这就是我遇到问题的地方。当我输入此 URL "/services/new" 时，我希望 AddServiceView 嵌套在其父组件中，其中存在 {this.props.children}。相反，我在浏览器中得到一个空白页面。

如果在上面的路由配置中，我将AddServiceView 的路径从path="new" 更改为path="/new"（注意斜线），然后我点击了这个网址"/new"，然后 AddServiceView 正确显示，嵌套在其父级中。

这让我很困惑。这个 url /new 往往表明显示的视图位于应用程序的根目录。

所以我的问题是：为什么我无法通过嵌套 url /parent/child 显示嵌套在其父级中的子组件（这遵循 Routes 布局），而是通过这个误导性 url @987654337 访问这个子组件@?

我希望我的问题很清楚。谢谢你的建议。

注意事项：我使用的是 vscode + webpack + react + typescript。在一些帖子中，一些人认为 webpack 及其与 react-router 的工作方式可能存在问题。但是由于我是 webpack 的新手，所以我无法在我的案例中调查他们的解决方案。

【问题讨论】：

我查看了 chrome 调试控制台，对于这个 url “/services/new”，有一个 404（未找到）错误：bundle.js 所以看起来错误与webpack...我的假设正确吗？

标签： webpack react-router nested-routes

【解决方案1】：

对于任何试图让 react-router 嵌套路由与 webpack 开发服务器一起工作的人，github post 给出了答案：当你引用你的 .js 文件时，基本上在你的 index.html 中使用绝对路径。例如使用/bundle.js 而不是bundle.js

【讨论】：