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：反應路由器只呈現索引路由

回答

相關問題