Criando rota para 404


Para criar uma página “Page Not Found” com React Router DOM, você pode utilizar o componente <Route> para capturar todas as rotas não encontradas e exibir a página de erro 404.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<About />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

Neste exemplo, o componente <Routes> renderiza o primeiro filho <Route> que corresponde à localização atual. Se nenhum <Route> corresponder, o componente com o path="*" será renderizado. Isso torna o componente PageNotFound a página exibida quando nenhuma outra rota for encontrada.

Referências