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

Question

我正在开发一个 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>
  );
}

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

Answer 1

React 路由器是基于优先级的，前 lines/top 路由比其他路由具有更高的优先级，您可以只添加一个没有路径属性的普通 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'));

Answer 2

“更好的方法”可能是主观的，但可以帮助解决 objective 需要匹配route before 检查权限然后我建议反转控制。我的意思是您应该创建一个自定义 Route 组件，它将首先匹配然后检查权限。目前尚不清楚您的代码片段是否是简化版本，但我认为挂钩可能还确定用户是否有权访问当前 route/resource。如果对此有额外的检查，那么您可以有条件地使用当前道具渲染 Route 或者您可以渲染 Redirect 以将用户“弹回”路线，因为他们缺少所需的权限（s ).

示例：

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>

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

Better way to handle 404 page not found in a React app

javascript

components

reactjs

react-router-dom

react-hooks