JIYIK CN >

Use wildcard placeholders to handle 404 pages not found in React routes, for example <Route path="*" element={<PageNotFound />} />. The route with an asterisk *acts as a catch-all route. It matches only if no other routes match.

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>
  );
}

We used mismatched routing.

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

*Wildcard syntax can only be used at the end of a path.

A route with path equal to * is a route that will match any request. It will only match if no other routes match.

If the user navigates to /or /aboutthey will get the components we set up for those routes, however, if they navigate to any other page they will get PageNotFoundthe component.

Another way to handle 404 not found pages in React routing is to redirect the user to a different page when they try to go to a page that doesn't exist.

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>;
}

In the example, PageNotFoundinstead of rendering the component if they match a route that doesn't exist, we redirect the user to /.

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

NavigateWe use the element to redirect the user to every time they go to a route that doesn't have any matches /.