迹忆客 专注技术分享

使用通配符占位符来处理在 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>
  );
}

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

{/* 👇️ 仅在没有其他路由匹配时才匹配 */}
<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>;
}

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

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

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