Question

我在我的项目中使用react-router-dom处理不同的路由。在route.jsx中，我必须处理404和401错误。我针对这两种情况写了后续视图，并将它们添加到我的路线中。现在的问题是，我的代码结构与互联网上的所有示例略有不同。因此，到目前为止，没有文章对我有帮助。发生的是，当应输入应用程序中未定义的路由时，即使应显示404错误页面，我的应用程序也只会显示401错误页面。其他路线也会相应渲染。 App可以很好地处理身份验证，并显示401页的用户超出范围的路由。

我将显示一些代码：

module.exports = {
  SITE_ROUTES,
  mainRoute: (
    <div className={styles.container}>
      <Switch>
        <Route exact path="/login" component={LoginRouteHandler} />
        <Route exact path="/logout" component={LoginRouteHandler} />
        <Route exact path="*" component={AppContainer} />
      </Switch>
    </div>
  )
}

除登录或注销外，其他任何路由都由我的AppContainer处理。我的AppContainer如下所示：

const AppContainer = () => (
  <div className={styles.content} >
    <SidebarWithRouter style={{ width: 200 }} />
    <div className={styles.mainContainer} style={{ marginLeft: 200 }}>
      <Switch>
        {SITE_ROUTES.map((route, index) => {
          if (!_.has(route, "accessLevel") || route.accessLevel) {
            return <Route key={index} exact path={route.route} component={route.component} />
          }
          return <Route key={index} component={UnauthorizedAccessRouteHandler} />
        })}
      </Switch>
  </div>
)

在这里，用我SITE_ROUTES数组中已定义的路由检查在URL中输入的所有路由。检查每条路线的访问权限清除，如果没有访问该特定路线的权限，则会显示一个渲染的401页。

我的SITE_ROUTES数组如下：

const SITE_ROUTES = [
  {
    route: "/profile",
    component: ProfileRouteHandler,
  },
  {
    route: "/edit_sections",
    component: EditSectionsRouteHandler,
    accessLevel: accessLevel.hasCsLevel1Access()
  },
  {
    route: "*",
    component: PageNotFoundRouteHandler,
  }
]

看到带有route: "*"的数组的最后一个出价吗？这是行不通的。因此，当我访问/edit_sections时，UnauthorizedAccessRouteHandler会得到渲染，这是正确的，因为用户没有适当的清除方法。但是，当我输入任何/xyz之类的随机路径时，它不会呈现PageNotFoundRouteHandler，而是呈现UnauthorizedAccessRouteHandler。

如果有人可以帮助我，我将非常感谢。预先感谢！

为什么React Router不针对“ *”通配符路由呈现正确的组件？

0 个答案: