テンプレート領域を使用した動的パラメータ

Question

React-Router v4でリアクションアプリを設定しようとしています。 私は、動的経路パラメータを使ったナビゲーションと、動的経路パラメータを取るコンポーネントを使ってアプリケーションテンプレートの領域を対象とする機能が必要です。 v4のドキュメントによると、私はこのような私のルートを定義する必要があります。

const routes = [ 
    { 
     exact: true, 
     path: '/vpcs', 
     navLevel2:() => <VpcList></VpcList>, 
     mainContent:() => <h1>Hello VPCs</h1> 
    }, 
    { 
     exact: true, 
     path: '/vpcs/:vpcName', 
     navLevel2:() => <VpcList></VpcList>, 
     mainContent:() => <Vpc></Vpc> 
    } 
] 

その後、私が行うことができます。

<BrowserRouter basename="/">  
    <div> 
     <nav> 
      <ul> 
       <li><NavLink to="/vpcs">Vpcs</NavLink></li> 
      </ul> 
     </nav> 
     <nav> 
      {routes.map((route, index) => (
       <Route 
       key={index} 
       path={route.path} 
       exact={route.exact} 
       component={route.navLevel2} 
       /> 
      ))} 
     </nav> 
     <main> 
      {routes.map((route, index) => (
       <Route 
       key={index} 
       path={route.path} 
       exact={route.exact} 
       component={route.mainContent} 
       /> 
      ))} 
     </main>   
    </div> 
</BrowserRouter> 

をしかし、Vpcに:vpcNameに値を渡す方法がないようですコンポーネントを必要とします。私はルート/vpc/my-vpc-nameをコンソールログにヒットすると

Uncaught TypeError: Cannot read property 'params' of undefined at new Vpc ... 

は私が試したcomponent={route.mainContent}の代わりに、と仕事をしなければならないかを確認するには、次の

component={() => (<p>{JSON.stringify(arguments)}</p>)} 

そして、それは

{"0":{"i":480,"l":false,"exports":{}},"1":{}} 

をもたらしました

...これは奨励していません。

私は何をしますか？動的ルートパラメータを取得しながらテンプレートリージョンを動作させるには、v3に巻き戻す必要がありますか？代わりにあなたの<Route>タグでcomponentを使用しての

Answer 1

あなたのコンポーネントは、実際にあなたがちょうどそれらを使用していない、小道具を経由してのparamsを受け取ります。私はここにあなたのための小さな例を作っmainContent: props => <div>{props.match.params.vpcName}</div>

：：のようなものをやってみhttps://codesandbox.io/s/v61p95k850

Answer 2

、あなたは機能を取り、あなたはそれの内側{() => (<p>{JSON.stringify(arguments)}</p>)}のようなあなたの機能を使用することができますrenderを使用する必要があります。

Here is a link to their doc