组件不刷新的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路由问题的主要内容,如果未能解决你的问题,请参考以下文章
React-Router 和 Meteor 无法在刷新时使用参数渲染路由
react-router browserHistory刷新页面404问题解决方法