Resolvido: reagir ao redirecionamento do roteador 404

O principal problema relacionado ao redirecionamento React Router 404 é que pode ser difícil de implementar. Como o React Router não possui uma página 404 integrada, os desenvolvedores devem criar manualmente uma rota para a página 404 e, em seguida, configurar o roteador para redirecionar quaisquer solicitações que não correspondam a uma rota existente. Isso requer código e configuração adicionais, que podem ser demorados e difíceis de depurar se algo der errado. Além disso, se um usuário navegar diretamente para um URL que não existe, ele ainda verá uma página de erro em vez de ser redirecionado para a página 404.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />

      {/* 404 Redirect */}
      <Route render={() => (<Redirect to="/" />)} /> 

    </Switch>
  </Router>  
);

// Linha 1: Esta linha importa os componentes BrowserRouter, Route e Switch da biblioteca react-router-dom.

// Linha 3: Esta linha define uma função chamada App que retorna JSX.

// Linhas 5-7: Essas linhas agrupam o componente App em um componente Router de react-router-dom.

// Linhas 8-10: Essas linhas definem duas rotas para os componentes Home e About, respectivamente.

// Linha 12: Esta linha define uma rota que redireciona para a página inicial se nenhuma outra rota corresponder.

O que é um código de erro 404

Um código de erro 404 no React Router é um código de status HTTP que indica que o recurso solicitado não foi encontrado. Geralmente é retornado quando um usuário tenta acessar uma página ou rota que não existe. Isso pode ocorrer se o usuário digitou incorretamente uma URL ou se a página foi removida ou movida sem atualizar os links para ela. Quando isso ocorrer, o React Router exibirá uma página 404 genérica com uma mensagem apropriada informando o usuário sobre o erro.

404 Redirect

No React Router, um redirecionamento 404 é uma forma de redirecionar os usuários para uma página diferente quando eles tentam acessar uma URL inválida. Isso pode ser útil para fornecer aos usuários uma experiência melhor quando eles inserem um URL incorreto ou tentam acessar uma página que não existe. O redirecionamento 404 pode ser implementado usando o componente Redirect do React Router, que permite especificar o nome do caminho da página para a qual você deseja redirecionar o usuário. Por exemplo, se alguém tentar acessar /invalid-url, você pode usar o componente Redirect assim: