如何在 React Routing 中设置 404 页面？

如果 URL 不存在或 URL 可能已更改，则每个网站都需要一个 404 页面。要在角度路由中设置 404 页面，我们必须首先创建一个组件，以便在发生 404 错误时显示。在下面的方法中，我们将创建一个名为 PagenotfoundComponent 的简单反应组件。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app 404page

注意：如果您之前已经通过 npm 全局安装了 create-react-app，请直接使用以下命令：

您的开发环境已准备就绪。现在让我们在我们的应用程序中安装 react-router。

第 2 步：创建项目文件夹（即 styled）后，移至同一文件夹：

cd styled

第 3 步：安装 react-router-dom：可以通过 npm 在您的 React 应用程序中安装 react-router-dom。按照下面给出的步骤在您的 React 应用程序中安装 react-router-dom：要安装 react-router-dom，请使用以下命令：

npm install --save react-router-dom

项目结构：它将如下所示。

项目结构

第 4 步：现在在 App.js 文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

应用程序.js

Javascript

import React from "react";
import {  Route, Switch, BrowserRouter } 
        from 'react-router-dom'
import Home from '.Home';
import PageNotFound from './404Page';
  
function App() {
  return (
    
      
        
        
      
    
  );
}
  
export default App;

Javascript

import React from 'react';
  
const Home = () => {
    
        Home Page
    
}
  
export default Home;

Javascript

import React from 'react';
  
const PageNotFound= () =>{
    
        404 Error
        Page Not Found
    
}
  
export default PageNotFound;

主页.js

Javascript

import React from 'react';
  
const Home = () => {
    
        Home Page
    
}
  
export default Home;

PageNotFound.js

Javascript

import React from 'react';
  
const PageNotFound= () =>{
    
        404 Error
        Page Not Found
    
}
  
export default PageNotFound;

说明：这里的 PageNotFound 路由是在路由内部提供的。这里除了提供的路由之外的任何路径都由这个 PageNotFound 处理，并且我们的 HTML 模板显示在浏览器中。因此，现在如果有人尝试向路由数组中不存在的任何页面发送请求，那么该用户将自动导航到此 PagenotfoundComponent。

运行应用程序的步骤：运行以下命令启动应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000 ，一切正常。现在转到http://localhost:3000/anything ，我们将在其中收到 404 错误，如下所示。