0

Estou tentando fazer uma navegação entra páginas em um projeto ReactJS.

A versão do react é 18.1.0

Estou usando o pacote react-router-dom versão 5.2.0

No meu componente App tenho o seguinte código:

import React from 'react';
import Routes from './routes';
import './Global.css';

function App() {
  return (
    <Routes/>
  );
}

export default App;

Meu componente Routes é dessa forma:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Login from './pages/Login';
import Alunos from './pages/Alunos';
import NovoAluno from './pages/NovoAluno';

export default function Routes(){
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/" component={Login} />
                <Route exact path="/alunos" component={Alunos} />
                <Route exact path="/aluno/novo/:alunoid" component={NovoAluno} />
            </Switch>
        </BrowserRouter>
    );
}

Se eu acessar as rotas digitando manualmente na URL, todas elas funcionam e renderizam os componente corretamente.

Porem, no componente Alunos eu tenho um Link que ao clicar, deve trocar de tela, mas isso não acontece, ele apenas troca a URL mas se mantem na tela (ou seja, nao troca o componente renderizado na tela).

O link no componente Alunos está assim <Link className='button' to="aluno/novo/0">Novo Aluno</Link>

Estou esquecendo alguma coisa?

1 Resposta 1

2

Bem, resumidamente existe um problema de compatibilidade entre o react@18 e o react-router-dom@5 https://github.com/remix-run/react-router/issues/7870

Você pode solucionar o problema das seguintes formas:

  1. Alterar a versão do react-router-dom@5 para a react-router-dom@6.
  2. Inserir um <React.StrictMode> dentro do BrowserRouter

..

<BrowserRouter>
<React.StrictMode>
...
</React.StrictMode>
</BrowserRouter>
1
  • Vou marcar como resposta, o link do github ajudou muito. O que eu fiz foi fazer somente a opção dois que você falou. Eu retirei o React.StrictMode do index e add somente no componente routes dentro de BrowserRouter.
    – Renan
    Commented 29/05/2022 às 14:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .