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?