处理在 React Router 中找不到的 404 页面

Handling 404 page not found in React Router

使用通配符占位符来处理在 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 catch all route */}
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

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

          {/* 👇️ only match this when no other routes match */}
          <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>
  );
}

找不到反应路由器页面

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

应用程序.js


{/* 👇️ only match this when no other routes match */}
<Route path="*" element={<PageNotFound />} />

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

路径等于的路由*用作捕获所有路由。它仅在没有其他路由匹配时才匹配。

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

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

应用程序.js


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 catch all route */}
              <Link to="/does-not-exist">Catch all route</Link>
            </li>
          </ul>
        </nav>

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

          {/* 👇️ only match this when no other routes match */}
          <Route path="*" element={<Navigate to="/" />} />
        </Routes>
      </div>
    </div>
  );
}

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

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

反应路由器未找到页面重定向

在这个例子中，我们没有渲染一个PageNotFound组件，而是将用户重定向/到一个不存在的路由。

应用程序.js


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

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

–