Resolvido: página de recarga do roteador de reação não encontrada

O principal problema relacionado à página de recarga do React Router não encontrada é que, quando um usuário atualiza a página, o navegador tenta fazer uma solicitação ao servidor para o URL atual. No entanto, como o React Router é roteamento do lado do cliente, não há rota de servidor correspondente para a URL e, portanto, um erro 404 Not Found é retornado. Isso pode ser especialmente problemático se os usuários esperam que determinado conteúdo apareça na atualização.

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

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

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </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 o código JSX.

// Linha 5: Esta linha envolve todo o código JSX em um componente Router de react-router-dom.

// Linha 6: Esta linha envolve todas as rotas em um componente Switch de react-router-dom.

// Linhas 7 – 9: Estas linhas definem duas rotas para '/' e '/about' respectivamente com seus respectivos componentes (Home e About).

// Linhas 11 – 12: Essas linhas definem uma rota para quando nenhuma outra rota corresponder, o que renderiza uma tag h1 dizendo “Página não encontrada”.

Erro de página não encontrada

O erro de página não encontrada no React Router é um erro que ocorre quando um usuário tenta acessar uma página ou rota que não existe. Isso pode acontecer se o usuário digitou incorretamente o URL ou se a página que ele está tentando acessar foi removida ou movida. No React Router, esse erro é tratado usando o render prop do componente e passando em uma função que retorna uma página 404. Isso permite que os desenvolvedores criem páginas 404 personalizadas com qualquer conteúdo que desejarem, como links úteis ou uma mensagem de desculpas.

Como faço para lidar com a página não encontrada no roteador react

Ao usar o React Router, você pode manipular uma página não encontrada criando uma rota personalizada que renderizará um componente NotFound quando a URL não corresponder a nenhuma das rotas existentes. Para fazer isso, você precisa criar uma nova rota com o caminho definido como “*” e renderizar seu componente NotFound.

Por exemplo:

} />

Isso corresponderá a qualquer URL que ainda não corresponda a uma rota existente e renderizará seu componente NotFound.

Como faço para forçar uma página de reação a recarregar

No React Router, você pode forçar o recarregamento de uma página usando o método replace no objeto de histórico. Isso substituirá a entrada atual na pilha do histórico por uma nova, forçando assim o recarregamento da página. Para usar este método, você precisa primeiro obter acesso ao objeto de histórico. Você pode fazer isso passando-o como um prop ao criar seu componente de roteador:

const AppRouter = () => (

{/* Suas rotas aqui */}

);

Depois de ter acesso ao objeto de histórico, você pode usar seu método de substituição da seguinte forma:

history.replace('/alguma-rota');