0

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.

2
  • Conseguiu resolver o problema? estou com um igual
    – guilherme
    Commented 21/07/2020 às 20:49
  • Infelizmente não. Commented 22/07/2020 às 14:54

1 Resposta 1

0

Já tive um problema assim e realmente não lembro muito o problema na época, mas era relacionado aos Sagas quando precisava mudar de rota. Minha solução foi usar o Connected React Router.

Dá uma olhada lá na documentação atual, mas quando eu fiz foi assim:

Na sua Store:

import { createStore, compose, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import { routerMiddleware } from "connected-react-router";

import history from "../routes/history"; // Atenção ao caminho
import sagas from "./sagas";
import reducers from "./ducks"; // Eu usava o Duck pattern

const sagaMonitor =
  process.env.NODE_ENV === "development"
    ? console.tron.createSagaMonitor()
    : null;
const sagaMiddleware = createSagaMiddleware({ sagaMonitor });

const middlewares = [sagaMiddleware, routerMiddleware(history)];

const createAppropriateStore =
  process.env.NODE_ENV === "development"
    ? console.tron.createStore
    : createStore;

const store = createAppropriateStore(
  reducers(history),
  compose(applyMiddleware(...middlewares))
);

sagaMiddleware.run(sagas);

export default store;

No index do combineReducer:

import { combineReducers } from "redux";
import { connectRouter } from "connected-react-router";
... // seus reducers e outras coisas

export default history =>
  combineReducers({
    router: connectRouter(history),
    auth,
... // seus reducers
)}

E ai no Saga, ao invés de usar o history, usa a função push do Connected React Router:

...
import { push } from "connected-react-router";

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));

      yield put(push('/dashboard')); // Aqui no lugar de history.push

   }
   catch (error) {
      console.log('Erro na autenticação');
   }
};
1
  • Tentei um monte de vezes aqui, fiz pelo código que vc mostrou, olhei o link que vc mandou, fiz do jeito que ensinava lá, vi um vídeo da rocketseat sobre isso, tentei tbm, mas nada do que eu fiz deu certo. O maldito componente da rota continua não renderizando sem eu ter que recarregar a página. Commented 23/07/2020 às 20:39

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 .