反应路由器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>

欢迎来到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。

反应路由器4与参数嵌套路由

相关推荐