固定ルートはここで割り当てられたコンポーネント

Question

をレンダリングしていないルータの設定である

<Route path="/" component={App}> 
    <Route path="/pages(/:section)" component={ Pages }> 
    <Route path="/pages/category" component={ Pages.Category }/> 
    <Route path="/pages/editor(/:uid)" component={ Pages.Editor }/> 
    </Route> 
</Route> 

Pagesコンポーネントsectionに依存ボタンを有効にする必要がありMenuコンポーネントが含まれています。ここで奇妙なのは、コンポーネントPages.Categoryがのprops.childrenに渡されないため、全くレンダリングされません。 path="/pages(/:section)"から(/:section)を削除すると、 `Pages.Categoryは期待通りにレンダリングされます。エディタのルートと同じです。これは予想される動作ですか？私は何か間違っているのですか？

Answer 1

はい、私の経験から、これは予想される動作です。

<Route path="/pages(/:section)" component={ Pages }>はルートグループです。ベースURLのみを定義できます。現在、ルータはこのルートと一致し、「ページ」コンポーネントを表示します。最初の試合が表示され、これが最初の試合です。あなたのコードでは、グループが作業するには、このようになります。

<Route path="/" component={App}> 
    <Route path="pages" component={ Pages }> 
    <Route path="category" component={ Pages.Category }/> 
    <Route path="editor(/:uid)" component={ Pages.Editor }/> 
    </Route> 
</Route> 

あなたは絶対1の上にURLを構築することはできません。

ルートは相対パスを使用している場合、それが構築さその祖先の蓄積された道にネストされたルートは、絶対パスを使用してこの動作をオプトアウトできます。

「ページ」コンポーネントで現在表示されているページに直接アクセスすることはできませんが、現在の完全パスはthis.props.location.pathnameから読むことができます。

this.props.location.pathname.match(/([a-z0-9]+)/g)[1] 
// Will give 'category' or 'editor' 

私はCodePenに取り組んexempleを持っています：http://codepen.io/loico/pen/VjqKvg#/pages/category