Question

我正在学习一些React并且有一个问题w.r.t.路由。

我正在使用react-router 4.在我的索引文件中，我有一个路由器，其中有3个路由定义如下：

<Router>
    <div>
        {indexRoutes.map((p, k) => {
            return <Route exact path={p.path} component={p.component} key={k} />;
        })}
    </div>
</Router>

页面是：主页，登录和受限制的成员区域。成员区域尚未受到身份验证的保护（对于问题而言无关紧要）。

会员区有一个Link菜单，根据点击的内容更改主要内容。相关组件的选择在Switch中完成。所发生的是主页和登录页面工作正常，但成员页面只是加载模板，当我点击链接时，我只得到空白页。

如果我没有更高阶的路由器（带有主页，登录，成员的路由器），我可以让成员页面正常工作，只需要从索引引用成员页面。

如何让低层路线按预期工作？

Answer 1

如果您使用的是react-router-dom，则可以使用Switch。将所有<Routes />包装到交换机组件中，而不是使用路由器。像这样：

import React from 'react';
import { Route, Switch } from 'react-router-dom';

<Switch>
  {indexRoutes.map((p, k) => {
      return <Route exact path={p.path} component={p.component} key={k} />;
  })}
</Switch>

然后将Switch嵌入到您的应用中，就像使用路由器一样。

低阶组件路由不起作用

1 个答案: