低阶组件路由不起作用

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>

这些页面是：主页、登录和受限成员区域。成员区域尚未受到身份验证的保护（对于问题的目的来说应该无关紧要）。

会员区有一个带有链接的菜单，可以根据点击的内容更改主要内容。相关组件的选择在 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 嵌入到您的应用中，就像使用路由器一样。