使用反應路由器-DOM兒童

Question

我試圖用孩子的路線內只有與反應路由器-DOM我無法訪問this.props.childre所以我就是這麼做的：

Index.js：

<Router> 
    <div> 
     <Route exact path="/" component={App}/> 
     <Route path="/login" component={Login}/> 
     <Route path="/forgot-password" component={ForgotPassword}/> 
     <Route path="/register" component={Register}/> 
     <Route path="/bank-account" component={BankAccount}/> 
    </div> 
</Router> 

App.js：

<Router> 
    <div className="uk-offcanvas-content"> 
     <Header store={this.context.store}/> 
     <main className="wt-main"> 
      <SideBar/> 
      <Route exact path="/" component={Dashboard} /> 
      <Route exact path="/historic" component={Historic}/> 
      <Route exact path="/profile" component={Profile} profile={profile}/> 
      <Route exact path="/receivable" component={Receivable}/> 
      <Route exact path="/operators" component={Operators}/> 
      <Route exact path="/create-operator" component={CreateOperator}/> 
     </main> 
     <footer> 
     </footer> 
     <SideBarResponsive/> 
    </div> 

的問題是，當我嘗試訪問內部路由s通過瀏覽器它出現一個空白頁面，但如果我訪問鏈接或重定向它正常工作

Answer 1

我掙扎着與我正在處理的儀表板容器相同的問題。我發現將我在容器的render方法中嵌套的路由添加到我的index.js中的路由配置中可以解決問題。

您的應用程序組件呈現嵌套路線，但直接訪問時（例如，如果嵌套路線爲書籤），頁面爲空白，因爲根組件不具有完全匹配呈現的路線（刪除「確切'道具並沒有改變我的情況）。

離開App.js原樣，並且嵌套路由添加到您的index.js：

<Router> 
    <div> 
    <Route exact path="/" component={App}/> 
    <Route path="/login" component={Login}/> 
    <Route path="/forgot-password" component={ForgotPassword}/> 
    <Route path="/register" component={Register}/> 
    <Route path="/bank-account" component={BankAccount}/> 
    <Route exact path="/" component={Dashboard} /> 
    <Route exact path="/historic" component={Historic}/> 
    <Route exact path="/profile" component={Profile} profile={profile}/> 
    <Route exact path="/receivable" component={Receivable}/> 
    <Route exact path="/operators" component={Operators}/> 
    <Route exact path="/create-operator" component={CreateOperator}/> 
    </div> 
</Router> 

文檔目前沒有將其指定爲使用舊路由的配置結構在需要的時候，然而同樣的V4問題/解決方案可以通過將示例代碼（從https://reacttraining.com/react-router/web/example/route-config）放入您的應用程序中並在index.js中爲其創建路線來複制。