处理在 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

“更好的方法”可能是主观的，但为了帮助解决在检查权限之前需要匹配路由的客观问题，我建议反转控制。 我的意思是您应该创建一个自定义Route组件，该组件将首先匹配然后检查权限。 不清楚您的代码片段是否是简化版本，但我认为钩子可能还确定用户是否有权访问当前路由/资源。 如果对此进行了额外检查，那么您可以有条件地使用当前道具渲染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>

Answer 2

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 3

反应路由器 v6

现场演示： 使用 React Router 重定向默认或 404 路由

示例代码：

<Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
  </Routes>
</Router>

为了重定向和导航到我们选择的路由之一，我们可以使用 React Router 中的组件。 现在我们可以在我们的路由配置下面声明空路由的情况，如下所示：

<Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
    <Route path="" element={<Navigate to="/users" />} />
  </Routes>
</Router>