来自 Action Creator 的 history.push() 将更改 URL 但不会导航到页面答案

【问题标题】：history.push() from Action Creator will Change URL but will Not Navigate to Page来自 Action Creator 的 history.push() 将更改 URL 但不会导航到页面
【发布时间】：2021-03-31 18:24:09
【问题描述】：

我有一个登录页面组件，我想在成功登录后从动作创建者（thunk）重定向。它似乎有效，但当 URL 正确更改时，页面仍保留在登录页面上。

这里我在action creator中导入要导入的历史：

// helpers/history.js
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

这里是动作创建器的缩短版本：

// actions/session.js
import history from '../helpers/history';


export const login = (formData) => {
    return (dispatch) => {
        dispatch({type: LOGIN_REQUEST})
        return fetch("http://localhost:3001/login", {
...
       .then((user) => {
            history.push('/live-rewards')
            dispatch({
                type: LOGIN_REQUEST_SUCCESS
            })
        })
        .catch(err => {
...

这里是组件的缩短版本，用于显示如何调用登录和导入

// containers/LoginForm.js
import React, { Component } from 'react'
import { connect } from "react-redux";
import { Link } from 'react-router-dom'
import { login } from '../actions/session'

class LoginForm extends Component {
...

    fetchOnSubmit = (e) => {
      e.preventDefault()
      this.props.login(this.state)
    }
...
const mapDispatchToProps = dispatch => {
  return {
    login: (credentials) => {
      return dispatch(login(credentials))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

这里是 browserRouter 的实现方式：

// index.js
...
  <React.StrictMode>
    <Provider store={store}>
        <App />
    </Provider>
  </React.StrictMode>
...

// app.js
...
    <Router>
      <Navbar toggle={toggle} />
      <Sidebar isOpen={isOpen} toggle={toggle} />
      <Switch>
        <Route path='/live-rewards' component={Liverewards}/>
        <Route path='/signin' component={Signin}/>
        <Route path='/signup' component={Signup}/>
        <Route path='/' exact component={Home}/>
      </Switch>
    </Router>
...

【问题讨论】：

标签： javascript reactjs react-redux redux-thunk browser-history

【解决方案1】：

我建议您完全放弃此 history 对象，并从 BrowserRouter 上下文中的组件处理导航，而不是通过动作创建器。

LoginForm 可以通过withRouter 访问上下文history 属性。它可以通过mapStateToProps 传递isLoggedIn 属性来访问状态中的凭据。

LoginForm 的 render() 方法将包含一个 Redirect 组件，该组件根据 isLoggedIn 属性有条件地呈现，当您 dispatch LOGIN_REQUEST_SUCCESS 时该属性将更新。

以某种方式从state 映射到boolean 道具isLoggedIn。一个例子：

const mapStateToProps = (state) => ({
  isLoggedIn: !!state.credentials.token
})

条件渲染：

{this.props.isLoggedIn && <Redirect to="/live-rewards" />}

我更喜欢这种方法，因为这意味着如果用户已经登录，则根本无法加载登录页面。

【讨论】：