Question

尝试使用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>

但是，似乎没有办法将: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才能使模板区域正常工作？

Answer 1

您的组件实际上通过道具接收参数，您只是不使用它们。尝试执行以下操作：mainContent: props => <div>{props.match.params.vpcName}</div>

我在这里为你做了一个小例子：https://codesandbox.io/s/v61p95k850

Answer 2

而不是在component标记中使用<Route>，您应该使用render来获取该函数，然后您可以使用其中的{() => (<p>{JSON.stringify(arguments)}</p>)}函数。< / p>

Here is a link to their doc

带模板区域的动态参数

2 个答案: