リアクタールーターDomルートとサブルート

Question

リアクタールーターdom/ReactJS初心者はここで一般的です。

私は若干クリーンアップできると思うルータコードをいくつか持っていますが、その試みはこれまで失敗しています。確かにこの分野の私の知識にはいくつかのギャップがあります。私は私の理解を拡大するのに役立っている同様の質問をpagedしましたが、私はこの時点でドットをうまく結びつけていません。

次のコードは問題なく動作しているようですが、すべての管理ルートに「/ admin」というプレフィックスが繰り返し付いています。

<BrowserRouter> 
    <div> 
     <div className="nav-bar"> 
      <ul> 
       <li><Link to="/admin">Home</Link></li> 
       <li><Link to="/admin/content">Content</Link></li> 
       ... 
      </ul> 
     </div> 
     <div className="nav-content"> 
      <Route exact path="/admin" component={AdminHome}/> 
      <Route path="/admin/content" component={AdminContent}/> 
      ... 
     </div> 
    </div> 
</BrowserRouter> 

ただし、「入れ子になった」ルートをサブルート要素に移動することはできません。 JavaScriptコンソールはエラーメッセージ "警告：あなたは使用しないでください。同じ経路では無視されます。"

<Route exact path="/admin" component={AdminHome}> 
    <Route path="/content" component={AdminContent}/> 
    ... 
</Route> 

ご意見をいただければ幸いです。私はいくつかのオプションを見つけました。例えば、<Route path="/admin/:whatever" render={() => (...)}/>を使うことができましたが、現時点では正しいパスのようには見えません。

この理由は、最終的にルートパラメータをツリーの下にさらに必要とするからです。 /admin/content/:content_type/:identifierの行に沿ったURIの場合、理想的には、自分のAdminContentコンポーネントは、親ルートのマッチに関して不自然なものになります。

私は基本的な方法をオフにしている場合は教えてくださいまた、私はそれを読むことが私に光を私に見せてくれると信じているドキュメントがあれば教えてください。

もう一度感謝します！

Answer 1

上記のChristopherのおかげで、いくつかの良いドキュメントへのリンクがあります。

は、リンクされたドキュメントを1として、次の変更は今稼働している：

{/* top-level route declaration */} 
<div className="nav-content"> 
    {/* note the removal of the exact property here */} 
    <Route path="/admin" component={AdminRoutes}/> 
</div> 

{/* "sub-routes" (possible poor nomenclature) */} 
const AdminRoutes = ({ match }) => (
    <div> 
     {/* note the addition of the exact property here */} 
     <Route exact path={match.url} component={AdminHome}/> 
     <Route path={match.url + "/content"} component={AdminContent}/> 
     <Route path={match.url + "/data-store"} component={AdminDataStore}/> 
     <Route path={match.url + "/search"} component={AdminSearch}/> 
     <Route path={match.url + "/communicate"} component={AdminCommunicate}/> 
     <Route path={match.url + "/promote"} component={AdminPromote}/> 
     <Route path={match.url + "/measure"} component={AdminMeasure}/> 
     <Route path={match.url + "/experimental"} component={AdminExperimental}/> 
    </div> 
) 

はさらにビットを拡張するには、次のすべての例では、私がこれまでにネストされたルートとインバウンド「一致を使用して見てきましたこれらのパラメータは上記のように実装されています。すなわち、const X = ({match}) => (...)です。

しかし真のReact.Componentサブクラスを定義することは可能であり、潜在的に有用である。この場合、パラメータ一致はまだthis.propsで利用できる。

class Content extends React.Component { 

    // usage example 
    render() { 

     // `match` is available via inbound props 
     console.log(this.props.match); 

     return (
      <p>Match is {this.props.match.url}</p> 
     ) 
    } 
} 

私はReactJSの初心者です。この時点で再反復するためにたい...私は愚かな何かをやっているなら、私に知らせてください:)