首页 > 解决方案 > 是官方的。history.push 不呈现新组件

问题描述

history.js 中的 Lib 5.0.0 不会使用“推送”方法呈现新组件。它正在执行端口重定向,但组件不呈现。在说主题重复之前,我尝试了互联网上可用的所有内容。'withRouter',改变'history'参数。我正在尝试将“推”放在传奇中并使用反应钩子。我真的不知道为什么会出现这种行为。反正。我提供下面的代码。

应用程序.js

import React from 'react';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import { Router } from 'react-router-dom';
import './config/ReactotronConfig';
import Routes from './routes/index';
import history from './services/history';
import { store, persistor } from './store/index';
import GlobalStyle from './styles/global';

function App() {
  return (
<>
  <Provider store={store}>
    <PersistGate persistor={persistor}>
      <Router history={history}>
        <Routes />
        <GlobalStyle />
      </Router>
    </PersistGate>
  </Provider>
   </>
  );
}

export default App;

index.js

import { BrowserRouter, Switch } from 'react-router-dom';
import React from 'react';
import Route from './Route';
import Landing from '../pages/Landing';
import Main from '../pages/Main';
import SignUp from '../pages/SignUp';
import Profile from '../pages/Profile';
import EditProfile from '../pages/EditProfile';
import SignIn from '../pages/SignIn';
import ForgotPassword from '../pages/ForgotPassword';
import ResetPassword from '../pages/ResetPassword';

export default function Routes() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Landing} />
        <Route path="/main" component={Main} />
        <Route path="/register" component={SignUp} />
        <Route path="/login" component={SignIn} />
        <Route path="/forgot" component={ForgotPassword} />
        <Route path="/reset" component={ResetPassword} />
        <Route path="/profile" component={Profile} />

        <Route path="/editprofile" component={EditProfile} isPrivate />
      </Switch>
    </BrowserRouter>
  );
}

路线/auth/sagas.js

import { takeLatest, all, put, call } from 'redux-saga/effects';
import api from '../../../services/api';
import * as authActions from './actions';
import history from '../../../services/history';

function* login({ payload }) {
  try {
    const session = yield call(api.post, 'session', payload);
    yield put(authActions.loginSuccess(session.data));
    history.push('/main')
  } catch (error) {
    yield put(authActions.loginFailure(error));
  }
}
export default all([takeLatest('@auth/login_request', login)]);

标签: javascriptreactjs

解决方案


推荐阅读