处理 React 应用程序中找不到的 404 页面的更好方法答案

【问题标题】：Better way to handle 404 page not found in a React app处理 React 应用程序中找不到的 404 页面的更好方法
【发布时间】：2021-10-18 06:03:23
【问题描述】：

我正在开发一个 React 应用程序，我正在尝试找出一种更好的方法来重定向到当用户点击错误路径时未找到的 404 页面。
基本上，我的应用程序有一个导航栏，其中包含三个主要路由（主页、内容、权限）和一个默认重定向来呈现一个显示 404 页面未找到的路由：

<Switch>
  <Route path="/home" component={Home} />
  <Route path="/content" component={Content} />
  <Route path="/permissions" component={Permissions} />
  <Route path="/not-found" component={PageNotFound} />
  <Redirect to="/not-found" />
</Switch>

我的问题是 /Permissions 路由，因为这个路由有很多子路由来显示多个配置页面，我需要使用钩子来获取数据，所以如果用户走错了路径，它需要在被重定向到未找到的页面之前等待数据获取：

const Permissions = () => {
  const {isFetchingData} = usePermissionsData();

  if(isFetchingData) {
    return <Loading />;
  } 

  return (
    <div className={styles.permissions} >
      <div className={styles.leftMenu} >
        <LeftMenu />
      </div>
      <div className={styles.content} >
        <Switch>
          <Route path="/permissions" component={PermissionsWelcome}
          <Route path="/permissions/users" component={UsersPermissions}
          <Route path="/permissions/content" component={ContentPermissions}
          <Route path="/permissions/dashboard" component={DashboardPermissions}
          <Redirect to="/not-found" />
        </Switch>
      </div>
    </div>
  );
}

所以我的问题是，是否存在更好的方法将用户重定向到未找到的页面而无需等待数据获取？（我认为这是浪费处理）。
欢迎提出任何建议！

【问题讨论】：

标签： javascript reactjs react-hooks components react-router-dom

【解决方案1】：

“更好的方法”可能是主观的，但有助于解决客观需要匹配路线的问题在检查权限之前我建议反转控制。我的意思是你应该创建一个自定义的Route 组件，该组件将首先匹配然后检查权限。目前尚不清楚您的代码 sn-p 是否是简化版本，但我认为该挂钩可能还确定用户是否有权访问当前路由/资源。如果对此有额外的检查，那么您可以有条件地使用当前道具渲染 Route，或者您可以渲染 Redirect 以“反弹”用户离开路线，因为他们缺少所需的权限。

例子：

const PermissionRoute = props => {
  const {isFetchingData} = usePermissionsData();

  if(isFetchingData) {
    return <Loading />;
  }

  return <Route {...props} />;
};

权限

const Permissions = () => {
  return (
    <div className={styles.permissions} >
      <div className={styles.leftMenu} >
        <LeftMenu />
      </div>
      <div className={styles.content} >
        <Switch>
          <PermissionRoute path="/permissions/users" component={UsersPermissions} />
          <PermissionRoute path="/permissions/content" component={ContentPermissions} />
          <PermissionRoute path="/permissions/dashboard" component={DashboardPermissions} />
          <PermissionRoute path="/permissions" component={PermissionsWelcome} />
          <Redirect to="/not-found" />
        </Switch>
      </div>
    </div>
  );
}

主路由

<Switch>
  <Route path="/home" component={Home} />
  <Route path="/content" component={Content} />
  <Route path="/permissions" component={Permissions} />
  <Route path="/not-found" component={PageNotFound} />
  <Redirect to="/not-found" />
</Switch>

【讨论】：

【解决方案2】：

React 路由是基于优先级的，top lines/top routes 的优先级高于其他路由，你可以添加一个没有 path 属性的普通 react 页面的路由，示例：

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Main from './Main'; // Main component
import NotFound from './NotFound'; // Create a not found component

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Main} />
      <Route component={NotFound} /> // this must be placed atlast.
    </Switch>
  </Router>
);

render(<App />, document.getElementById('root'));

【讨论】：