react判断路由页面不存在的方法
在React中，我们可以使用路由来管理页面之间的导航和切换。当用户访问一个不存在的页面或者路由时，我们需要做出相应的处理。下面是一些判断路由页面不存在的方法。
1.使用Switch组件
React Router库提供了一个Switch组件，它可以帮助我们到第一个匹配的路由，并渲染相应的组件。我们可以将一个特殊的"404"路由放在所有其他路由之后，以便在不到页面时渲染它。
```javascript
import { Switch, Route } from 'react-router-dom';
const NotFound = () => {
return <h1>404 -页面未到</h1>;
};
const App = () => {
return (
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route component={NotFound} />
</Switch>
</div>
);
};
```
在上面的例子中，Switch组件将根据路径匹配首先渲染Home组件，然后是About组件。如果路径不匹配任何已定义的路由，Switch会渲染NotFound组件。
2.使用重定向
如果我们想要将不到页面的用户重定向到一个已存在的页面，我们可以使用Redirect组件来实现。
```javascript
import { Switch, Route, Redirect } from 'react-router-dom';
const NotFound = () => {
return <h1>404 -页面未到，请稍后重试</h1>;
};
const App = () => {
return (
<div>
<Switch>
//其他路由
<Redirect from="/404" to="/not-found" />
<Route component={NotFound} />
</Switch>
</div>
);
};
```
上面的例子中，如果用户访问了一个不存在的页面，我们将会重定向到“/not-found”的路径。同时，我们可以在NotFound组件中给出一些友好的提示信息。
3.使用创建高阶组件（HOC）
我们可以创建一个高阶组件，用于检查当前路径是否存在于路由中。如果路径不存在，则可以渲染一个特定的组件。
```javascript
import { withRouter } from 'react-router-dom';
const NotFound = () => {
return <h1>404 -页面未到</h1>;
};
const withNotFoundHandling = (Component) => {
const WrappedComponent = (props) => {
const currentPath = props.location.pathname;
//检查当前路径是否存在于路由中
if (currentPath !== "/" && currentPath !== "/about") {
return <NotFound />;
}
return <Component {...props} />;
};
return withRouter(WrappedComponent);
};
const Home = () => {
return <h1>欢迎访问首页</h1>;
};
const About = () => {
return <h1>欢迎访问关于页面</h1>;
};
const App = () => {
const HomeWithHandling = withNotFoundHandling(Home);
reactrouter6路由拦截

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。