リアクタ・ルータ4つのネストされた経路とパラメータを持つ

Question

リア・ルータ4で以下の設定でドキュメント・ルートを追加する方法がわかりません.uuidをDocumentPageの小道具として渡す必要があります。 ？

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> 

Answer 1

コメントでミッケルの提案@オフピギーバックは、以下を試してください。

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> 

この場合、それは最初document/:uuid、その後、/documents/createため正確一致するものを探します、そして最後に/documents。

<Document />コンポーネントのuuidを取得すると、this.props.match.params.uuidに配置されます。