了解嵌套路由如何在反应路由器中工作

我真的很难理解嵌套路由如何与反应路由协同工作。我看了很多类似的问题，但我不能让事情工作。了解嵌套路由如何在反应路由器中工作

我的目标是让孩子部件显示父组件内，并与相应的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>

所以我在浏览器中输入这个网址"/"，该WelcomePage（嵌套withing的应用程序组件）正确显示。当我输入"/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正确显示，嵌套在其父项内。

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

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

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

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

来源

2017-02-27 TheSoul

我看了一下铬调试控制台和这个网址“/服务/新”，有一个404（未找到）错误：bundle.js所以它看起来像错误的是与webpack有关...我的假设是否正确？ – TheSoul

对于任何试图使用webpack dev服务器的反应路由器嵌套路由，github post给出了答案：当您引用.js文件时，基本上在index.html中使用绝对路径。例如使用/bundle.js代替bundle.js

来源

2017-03-02 15:19:22 TheSoul

了解嵌套路由如何在反应路由器中工作

回答

相关问题