Question

我真的很难理解嵌套路由如何与react-route一起工作。我看过许多类似的问题，但我无法开展工作。

我的目标是让子组件在其父组件中显示，并使用相应的网址/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>

因此，我在浏览器中输入此网址"/"，正确显示WelcomePage（与App组件嵌套）。当我输入"/services"时，ServiceView会正确显示（嵌套在App视图中）。以下是ServiceView组件的简化布局：

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

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

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

这让我很困惑。此URL /new倾向于指示显示的视图位于应用程序的根目录。

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

我希望我的问题很明确。谢谢你的建议。

备注：我正在使用vscode + webpack + react + typescript。在一些帖子中，有些人建议webpack可能存在问题以及它与react-router的工作方式有关。但由于我是webpack的新手，我无法在我的案例中调查他们的解决方案。

Answer 1

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

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

1 个答案: