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

Posted

技术标签:

【中文标题】组件不刷新的react-router路由问题【英文标题】:react-router routing problem with component not refreshing 【发布时间】:2020-09-11 07:11:12 【问题描述】:

我正在尝试在我的 redux react 应用程序中使用 history.push 方法。它工作正常,但问题是我的组件不会改变,你们知道为什么吗?

route.js:

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 action.js 调用历史记录的地方,这是我调度我的操作的地方:

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

【问题讨论】:

我添加了一些代码 即使我添加了一些配置文件组件并将其路由显示相同的问题` . history.push('/profile') ` 正在工作,但除非我刷新我的页面,否则我的组件不会改变 import BrowserRouter as Router,Route, Switch from "react-router-dom"; 【参考方案1】:

当您提供history 道具时,您应该使用Router。见this、Router和BrowserRouter:

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

而不是

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

【讨论】:

以上是关于组件不刷新的react-router路由问题的主要内容,如果未能解决你的问题,请参考以下文章

关于vue-router传参的理解

React-Router 和 Meteor 无法在刷新时使用参数渲染路由

react-router browserHistory刷新页面404问题解决方法

[react-router] React-Router 4怎样在路由变化时重新渲染同一个组件?

React-Router 路由到类组件

react-router 同一路由,参数不同,页面没有刷新