Redux + React：反应路由器只呈现索引路由

我试过在this question后面的答案，但无济于事。我正在尝试使用反应路由器和嵌套路由来呈现不同的布局，具体取决于路由器的配置。但无论存在的URL如何，总是显示path="/"的路线。这是我使用的路由器。Redux + React：反应路由器只呈现索引路由

 <Route component={App}> 
      <Route component={LayoutOne}> 
       <Route path="/" component={ComponentOne}/> 
      </Route> 
      <Route component={LayoutTwo}> 
       <Route path="category" component={ComponentTwo}/> 
      </Route> 
     </Route>

这里是我用来映射调度到道具和连接的应用程序文件。

function mapStateToProps(state, ownProps){ 
    return{ 
     exampleProp: state.exampleProp, 
    }; 
} 

function mapDispatchToProps(dispatch){ 
    return bindActionCreators(actionCreators, dispatch); 
} 


const App = connect(mapStateToProps, mapDispatchToProps)(MainLayout); 

export default App;

以上是主布局MainLayout如上所示。

export default class MainLayout extends Component { 
    render(){ 
     <div className="main-layout"> 
      {this.props.children} 
     </div> 
    } 
}

LayoutOne和LayoutTwo（为了简洁省略）是简单的类别说唱歌手，如下所示。

出口默认类LayoutOne扩展组件{ 渲染（）{ 回报（ {} this.props.children ） }}

而这里的ComponentOne和ComponentTwo分别只是简单的组件。

我的问题是只有ComponentOne呈现，无论存在什么URL。如何解决此问题，以便我可以使用上面显示的嵌套路线？您的帮助将不胜感激。如果您需要任何其他信息，请询问我将尽最大努力用所需信息更新问题。谢谢。

来源

2017-01-23 Natalie Williams

只是好奇 - 不使用'/ category'工作，而不是'category'？ –

你遇到的问题是索引路由，即'/'，首先在路由树中匹配，并且因为它匹配任何路由，它是每次都呈现的路由。

您可以通过将Route与path="category"移到path="/"以上来解决此问题。这样，首先检查更详细的路线选项。为了清楚起见，我还建议将path="category"更改为path="/category"，因为两者都是根级别路线。

来源

2017-01-23 18:54:39 jakee

改变你的路线，看起来像这应该解决您的问题

<Route component={App} path="/"> 
    <Route component={LayoutOne} path=""> 
     <Route component={ComponentOne}/> 
    </Route> 
    <Route component={LayoutTwo} path="category"> 
     <Route component={ComponentTwo}/> 
    </Route> 
</Route>

来源

2017-01-24 01:34:01

Redux + React：反应路由器只呈现索引路由

回答

相关问题