反應路由器4與參數嵌套路由

我有一些困難，理解如何添加文檔路由與反應路由器4下面的設置中。也許uuid需要作爲通道傳遞給DocumentsPage，以便您可以返回DocumentPage ？反應路由器4與參數嵌套路由

routes = { 
    home: '/', 
    documents: '/documents', 
    createDocument: '/documents/create', 
    document: '/document/:uuid', 
} 

<BrowserRouter> 
    <div> 
     <Switch> 
      <Route exact={true} path={routes.home} component={HomePage} /> 
      <Route path={routes.documents} component={DocumentsPage} /> 
      <Route path={routes.createDocument} component={CreateDocumentPage} /> 
      <Route component={NotFoundPage} /> 
     </Switch> 
    </div> 
</BrowserRouter>

來源

2017-10-05 Rick Tulsa

歡迎來到Stack Overflow。在你的路由聲明中，沒有一個用於/ document（單數） - 是這個問題嗎？ – Mikkel

沒有。添加它沒有效果。看起來像createDocument也指向文檔。嗯... –

因此，createDocument路由將無法訪問，因爲您尚未指定'確切'。 – Mikkel

捎帶在評論關閉@的Mikkel的建議，請嘗試以下操作：

routes = { 
    home: '/', 
    documents: '/documents', 
    createDocument: '/documents/create', 
    document: '/document/:uuid', 
}; 

<BrowserRouter> 
    <div> 
    <Switch> 
     <Route exact path={routes.home} component={HomePage} /> 
     <Route exact path={routes.createDocument} component={CreateDocument} /> 
     <Route path={routes.document} component={Document} /> 
     <Route path={routes.documents} component={DocumentsPage} /> 
     <Route component={NotFoundPage} /> 
    </Switch> 
    </div> 
</BrowserRouter>

在這種情況下，它會先尋找一個準確匹配/documents/create，然後document/:uuid，最後/documents。

獲取您的<Document />組件中的uuid將位於this.props.match.params.uuid。

來源

2017-11-05 15:46:49

反應路由器4與參數嵌套路由

回答

相關問題