react 路由404_如何创建404错误页面React路由器

react 路由404

A 404 error page is essentially when a user tries to reach a nonexistent page on your site, whether it’s because they’ve clicked on a broken link, the page has been deleted, or they’ve mistyped a URL.

404错误页面本质上是指用户试图访问您网站上不存在的页面，无论是因为他们单击了断开的链接，该页面已被删除还是输入了错误的URL。

This guide is for those who want to implement their page with React Router. You have a couple of different options to show page “not found’” component:

本指南适用于希望使用React Router实现其页面的用户。 您有几个不同的选项来显示页面“未找到”组件：

1. Route to yoursite.com/404
   路由到yoursite.com/404
2. Show Page not found content with the requested URL.
   显示带有请求的URL的未找到页面内容。

将路由切换到yoursite.com/404 (Switch Route to yoursite.com/404)

In order to redirect you need to import BrowserRouter, Switch, and Route from “react-router-dom”. Place the routed path code at the very bottom right above the closing Switch tag.

为了重定向，您需要从“ react-router-dom”导入BrowserRouter，Switch和Route。 将路由路径代码放在结束Switch标签上方的最右下角。

Now your App.js should look something like this:

现在您的App.js应该看起来像这样：

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./App.css";
import HomePage from "./pages/home";
import ContactPage from "./pages/contact";import ErrorPage from "./pages/404";export default function App() {return (
   <Router>
     <div className="App">
    <Switch>
     <Route exact path="/" component={HomePage}>
     <HomePage />
   </Route>
    <Route path="/contact" component={ContactPage}>
     <ContactPage />
   </Route>    <Route path="/404" component={ErrorPage}>
     <ErrorPage />
    </Route>
   </Switch> 
     </div>
   </Router>
   );
 }

显示页面未找到具有请求URL的内容 (Show Page not found content with requested URL)

Showing Page not found content with the requested URL is actually good as my point of view. In order to achieve this, you can use the empty method.

从我的角度来看，显示页面未找到的内容以及所请求的URL确实不错。 为了实现这一点，可以使用empty方法。

Create a path with just an empty string(“ ”) and add at the very last path of your routes.

创建一个仅包含一个空字符串(“”)的路径，并在路径的最后一条路径处添加。

Now your App.js looks like this:

现在，您的App.js如下所示：

import React from "react";
import { Redirect, Route, Switch, BrowserRouter } from 'react-router-dom';
import HomePage from './pages/HomePage.jsx';
import NotFoundPage from './NotFoundPage.jsx';class App extends React.Component {
    render(){
        return(
            <BrowserRouter>
                <Switch>
                    <Route exact path='/' component={HomePage} /><Route path="" component={NotFoundPage} />
                </Switch>
            </BrowserRouter>
        )
    }
}
export default App;

NotFoundPage组件 (NotFoundPage component)

A Not Found Page component is actually designed to showcase your creativity. You can play around and create your own custom 404-page design.

找不到页面组件实际上旨在展示您的创造力。 您可以玩耍并创建自己的自定义404页设计。

import React from 'react';
import { Link } from 'react-router-dom';
import PageNotFound from '../assets/images/PageNotFound';class NotFoundPage extends React.Component{
    render(){
        return <div>
            <img src={PageNotFound}  />
            <p style={{textAlign:"center"}}>
              <Link to="/">Go to Home </Link>
            </p>
          </div>;
    }
}
export default NotFoundPage;

And there you have it! A couple of ways to make 404 components.

在那里，您拥有了！ 制作404组件的几种方法。

翻译自: https://levelup.gitconnected.com/how-to-create-404-error-page-a-react-router-1e62277192cf

react 路由404