Estou tendo problemas na hora de renderizar o componente quando navego entre rotas usando o history. Acontece que simplesmente o componente da rota não é renderizado quando dou um history.push('/path').
A url muda, mas não aparece nada na tela. Eu preciso recarregar a página pro componente ser renderizado.
Aqui está o código: index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js
import React from 'react';
import Routes from './routes';
import { Router } from 'react-router-dom';
import { Provider } from 'react-redux';
import history from './services/history';
import store from './store';
function App() {
return (
<Provider store={store}>
<Router history={history}>
<Routes />
</Router>
</Provider>
);
}
export default App;
routes: index.js
import React from 'react';
import { Switch } from 'react-router-dom';
import Route from './Route';
import Login from '../pages/Login';
import Dashboard from '../pages/Dashboard';
export default function Routes() {
return (
<Switch>
<Route path="/" exact component={Login}/>
<Route path='/dashboard' component={Dashboard} isPrivate />
</Switch>
);
}
routes: Route.js (para controlar o acesso de quem está logado ou não)
import React from 'react'
import { Route, Redirect } from 'react-router-dom';
import store from '../store';
export default function RouteWrapper({
component: Component,
isPrivate = false,
...rest
}) {
const { logged } = store.getState().auth;
if (!logged && isPrivate) {
return <Redirect to="/"/>;
}
if (logged && !isPrivate) {
return <Redirect to="/dashboard" />;
}
return <Route {...rest} component={Component} />;
};
history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();
saga da autenticação:
export function* login({ payload }) {
try {
const { username, ppassword } = payload;
const response = yield call(api.post, 'auth', {
username,
ppassword
});
const { user, token } = response.data;
yield put(loginSuccess(user, token));
history.push('/dashboard');
}
catch (error) {
console.log('Erro na autenticação');
}
};
Faço o login, mas na página dashboard, nada é mostrado até eu recarregar a página.
Poderiam me dizer onde está o problema?
Obrigado.