反应路由器 404 重定向 - JavaScript

在Web开发中，访问网站的URL地址是非常重要的。路由器是Web开发中重要的组成部分，它是实现URL地址映射到应用逻辑的途径。在React应用中，React Router是最流行和灵活的路由器。当访问一个不存在的URL时，React Router默认会返回一个404错误。在本篇文章中，我们将演示如何通过JavaScript实现React Router 404重定向。

何时使用404重定向

当用户在您的Web应用程序中输入不可用的URL时，通常会返回一个404错误。这不是一个好的用户体验。相反，您可以重定向用户到存在的URL或其他页面，这样用户将能够继续使用您的应用程序而不会被打断。因此，您需要实现Route重定向，以便在匹配不到特定路由时将用户重定向到正确的页面。

实现404重定向

实现React Router 404重定向需要：

1. 安装React Router
2. 创建一个NotFound组件
3. 在App.js中添加NotFound组件和Redirect组件
4. 在路由器中使用NotFound和Redirect组件

安装React Router

React Router可以通过NPM安装。在终端中，输入以下命令来安装React Router：

npm install react-router-dom

创建NotFound组件

NotFound组件是显示在未找到匹配的路由时的页面。在/src目录下，创建一个名为NotFound.js的文件。将以下代码添加到该文件中：

import React from 'react';

const NotFound = () => {
    return (
        <div>
            <h2>404 Not Found</h2>
            <p>The page you are looking for does not exist.</p>
        </div>
    );
};

export default NotFound;

添加NotFound和Redirect组件

在/App.js文件中，将以下代码添加到React组件中：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import NotFound from './NotFound';

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/contact" component={Contact}/>
            <Redirect from="/old-url" to="/new-url" />
            <Route component={NotFound}/>
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

这段代码添加了NotFound组件和Redirect组件。NotFound组件将在未找到匹配的路由时显示。Redirect组件将来自/old-url的请求重定向到/new-url。

在路由器中使用NotFound和Redirect组件

在路由器中使用NotFound和Redirect组件可以通过Route组件完成。下面是一个例子：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import NotFound from './NotFound';

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/contact" component={Contact}/>
            <Redirect from="/old-url" to="/new-url" />
            <Route component={NotFound}/>
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

结论

React Router是一个强大的路由器，让您可以轻松地实现404重定向。您可以在React应用程序中使用NotFound和Redirect组件来创建一个美观的用户体验，使用户在不可用的URL时不至于被中断。本篇文章向您展示了如何使用JavaScript实现React Router 404重定向。