时间戳

首页 > 解决方案 > 使用路由容器时如何在反应中显示“未找到”路由？

reactjs - 使用路由容器时如何在反应中显示“未找到”路由？

问题描述

使用反应路由器 5.1 时，我没有显示“未找到”路由。

index.js：

function AuthedContainer() {
  const { loading, token, name, refreshError } = useCheckAccessToken();

  return (
    <Fragment>
      <LoadingOverlay loadingStatus={loading} />
      <NavBar name={name} />
      {isAllowed(userPermissions, ["view_results"]) && (
        <PrivateRoute exact path="/table" component={Table} token={token} />
      )}
      <Route component={NotFound} />
    </Fragment>
  );
}

const routes = (
  <BrowserRouter>
    <Switch>
      <Route exact path="/login" component={LoginForm} />
      <Route exact component={AuthedContainer} />
    </Switch>
  </BrowserRouter>
);

ReactDOM.render(routes, document.getElementById("root"));

我尝试在路由 const 中放置“未找到”路由，但效果不佳。

const routes = (
  <BrowserRouter>
    <Switch>
      <Route exact path="/login" component={LoginForm} />
      <Route exact component={AuthedContainer} />
      <Route component={NotFound} />
    </Switch>
  </BrowserRouter>
);

我发现“未找到”路由应该直接在 switch 组件中，所以我尝试重构，以便我的所有路由（包括经过身份验证的路由）都在同一个 switch 组件中。但是，我不希望useCheckAccessToken()在我在/login路线上时调用钩子。

谁能建议我如何在未登录时不调用 authed 挂钩的情况下让“未找到”路由工作？（如果有令牌，则表示您已登录）

标签： reactjsreact-router

解决方案

我最终将所有路线都放在了 1 个交换机中，然后对授权路线进行了不同的布局。

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        {pages.map(
          (
            {
              exact,
              path,
              component: Component,
              layout: Layout,
              requiredPermissions
            },
            index
          ) => (
            <Route
              key={index}
              exact={exact}
              path={path}
              render={props => (
                <Layout requiredPermissions={requiredPermissions}>
                  <Component {...props} />
                </Layout>
              )}
            />
          )
        )}
        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>
  );
}

每个页面都可以这样定义：

export const pages = [
  // Public pages
  {
    exact: true,
    path: routes.login,
    component: LoginPage,
    layout: PublicLayout,
    requiredPermissions: []
  },
  // Authenticated pages
  {
    exact: true,
    path: routes.dashboard,
    component: Dashboard,
    layout: AuthedLayout,
    requiredPermissions: []
  },
...

令牌处理将在“AuthedLayout”中处理：

export default function AuthedLayout(props) {
  const { loading, token, name, refreshError } = useCheckAccessToken();
  const userPermissions = GetUserPermissions(token);

  return !refreshError ? (
      <Fragment>
        <LoadingOverlay loadingStatus={loading} />
        <NavBar name={name} />
        <props.children.type token={token} userPermissions={userPermissions} />
      </Fragment>
  ) : !(!loading && token && name && !refreshError) ? (
    <Redirect to="/login" />
  ) : (
    "Unhandled Exception."
  );
}

希望这些对某人有所帮助。

推荐阅读