尝试使用 React-Router v4 设置 React 应用程序。我需要使用动态路由参数进行导航，以及使用采用动态路由参数的组件来定位我的应用程序模板区域的能力。根据 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>

但是，似乎没有办法将 for 的值传递:vpcName给Vpc需要它的组件。当我点击路由时/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 才能在使用动态路由参数时使模板区域工作？