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

Question

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

在这里，我导入要在动作创建者中导入的历史：

// 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>
...

Answer 1

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

CCD_ 3可以通过CCD_ 5访问上下文CCD_。它可以访问状态为通过mapStateToProps传递isLoggedIn道具的凭据。

LoginForm的render()方法将包括一个Redirect组件，该组件根据isLoggedIn道具有条件地渲染，该道具将在dispatchLOGIN_REQUEST_SUCCESS时更新。

---

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

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

条件渲染：

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

---

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