Question

我试过按this question的答案，但无济于事。我试图使用反应路由器和嵌套路由来呈现不同的布局，具体取决于路由器的配置。但是，master的路径始终显示，无论存在哪个URL。这是我正在使用的路由器。

path="/"

这是我用来将调度映射到道具并连接的App文件。

        <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

LayoutOne和LayoutTwo（为简洁起见，已省略）是简单的类饶舌手，如下所示。

导出默认类LayoutOne扩展Component { 渲染（）{ 返回（ {} this.props.children ） } }

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

我的问题是，无论存在什么URL，只有ComponentOne呈现。如何修复此问题以便我可以使用如上所示的嵌套路由？非常感谢您的帮助。如果您需要任何其他信息，请询问，我会尽力使用所需信息更新问题。感谢。

Answer 1

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

您可以通过Route移动path="category"，使path="/"高于path="category"。这样，首先检查更详细的路由选项。我还建议将path="/category"更改为function IsImageLoadable(URL) { var imageObj = new Image(); imageObj.src = URL; imageObj.onload = function(){ //your code } }只是为了清楚起见，因为两者都是根级路由。

Answer 2

将路线更改为这样可以解决您的问题

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

Redux + React：仅响应路由器呈现索引路由

2 个答案: