react-router路由问题，组件不刷新。

Question

我正在尝试使用 history.push 方法。它工作得很好，但问题是我的组件不会改变，你们知道为什么吗？

路由.js.com

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { history } from '../helper/history'

export default class route extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Router history={history}>
          <Switch>
            <Route exact path="/login" component={Login} />
            <Route path="/error" component={Error} />
          </Switch>
        </Router>
      </Provider>
    )
  }
}

Redux 动作.js 历史记录被调用的地方，这是我调度我的动作的地方，我想在我的redux react应用中使用history.push方法。

export const loginRequest = () => {
  return {
    type: userType.LOGIN_REQUEST,
  }
}

export const loginSuccess = () => {
  return {
    type: userType.LOGIN_SUCCESS,
  }
}

export const loginFailure = () => {
  return {
    type: userType.LOGIN_FAILURE,
  }
}

export const fetchUser = (data) => {
  return (dispatch) => {
    dispatch(loginRequest)
    axios
      .post(env.API_URL + 'login', { email: data.email, password: data.password })
      .then((res) => {
        dispatch(loginSuccess(res.data.user))
        history.push({
          pathname: '/profile',
        })
      })
      .catch((err) => {
        dispatch(loginFailure(error))
      })
  }
}

Answer 1

由于你提供的是 history 道具，你应该用 Router. 见 这个, 路由器 和 浏览器路由器:

import { Router, Route, Switch } from 'react-router-dom'

而不是

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'