迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

React 中处理 404 page not found

作者:迹忆客 最近更新:2022/06/01 浏览次数:

使用通配符占位符来处理在 React 路由中找不到的 404 页面,例如 <Route path="*" element={<PageNotFound />} /> 。 带有星号 * 的路由用作一条全能路由。 它仅在没有其他路由匹配时匹配。

import React from 'react';
import {Route, Link, Routes} from 'react-router-dom';

export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              {/* 👇️ 链接以捕获所有路由 */}
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />

          {/* 👇️ 仅在没有其他路由匹配时才匹配 */}
          <Route path="*" element={<PageNotFound />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function PageNotFound() {
  return (
    <div>
      <h2>404 Page not found</h2>
    </div>
  );
}

React 404 page not found.

我们使用了不匹配的路由。

{/* 👇️ 仅在没有其他路由匹配时才匹配 */}
<Route path="*" element={<PageNotFound />} />

* 通配符语法只能用在路径的末尾。

路径等于 * 的路由是一条可以匹配任何请求的路由。 它仅在没有其他路由匹配时匹配。

如果用户导航到 //about ,他们将获得我们为这些路由设置的组件,但是,如果他们导航到任何其他页面,他们将获得 PageNotFound 组件。

处理 React 路由中未找到的 404 页面的另一种方法是,当用户尝试转到不存在的页面时,将用户重定向到不同的页面。

import React from 'react';
import {Route, Link, Routes, Navigate} from 'react-router-dom';

export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              {/* 👇️ 链接以捕获所有路由 */}
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />

          {/* 👇️ 仅在没有其他路由匹配时才匹配 */}
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

React 处理404 重定向

在示例中,如果他们匹配不存在的路由,我们没有渲染 PageNotFound 组件,而是将用户重定向到 /

<Route path="*" element={<Navigate to="/" />} />

每次他们转到没有任何匹配项的路由时我们使用 Navigate 元素将用户重定向到 /

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便