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

我的问题是与/权限路由，因为这一个有许多子路由显示多个配置页面，我需要用钩子fetchData，所以如果用户去一个错误的路径，它需要等待数据抓取之前被重定向到未找到的页面:

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为"bounce"由于缺少所需的权限，用户离开了路由。

的例子:

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 router是基于优先级的，top行/top路由比其他路由有更高的优先级，你可以只添加一个普通的React页面，不带path属性，例如:

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'));