reactjs - 状态更改后 react 路由器不重新渲染

标签 reactjs redux react-router react-router-redux

我有这样的带有路由器的 react 组件。如果 props 传递的登录信息为 false,则将呈现登录页面。 props 由 redux 状态驱动。

const Root = ({logged, history}) => {
  console.log(logged);
  return (
    <div className="App">
      <Router history={history}>
        <div>
          <Route exact path="/" component={ATM} />
          <Route path="/login" component={LoginForm}/>
        </div>
      </Router>
      //Removed without effect-->{!logged ? <Redirect to="/login"/> : ""}
    </div>
  )
};

const fromState = (state) => ({
  logged: state.auth.logged
});

export default connect(fromState)(Root)

在我的登录组件中,我侵入了一个调用,该调用将询问服务器用户是否已成功通过身份验证,如果是的话则进行重定向。

this.props.dispatch(action).then((result) => {
  let responseCode = result.payload.status;
  if(responseCode === 200) {
    this.props.dispatch(push("/"))
  }
})

在我的应用程序中,我已这样定义历史记录:

let blankHistory = createHistory();
let store = storeCreator(blankHistory);
const history = syncHistoryWithStore(blankHistory,store );

存储创建者应用中间件和 reducer ,将历史记录作为参数,因为 routerMiddleware 需要它。

之后称为状态正在更改,记录变为 true,浏览器中的路径正在更改,历史对象知道该路径更改,但我仍然看到渲染的登录组件和 console.log(logged)不会被第二次调用。

有人知道问题到底是什么吗?

--编辑-- 经过一番调查后,我将这段代码添加到 init 中:

let history = syncHistoryWithStore(blankHistory,store );
console.log(history.location)
history.listen((something) => {
  console.log(something)
});

第一个日志中的历史记录具有正确的路径,但在该历史记录之后立即收到路径名:“/”,这可能是问题的原因。

最佳答案

问题在于 react-redux-routerreact-router 版本不兼容。我已经更新了第一个,它很有魅力。

关于reactjs - 状态更改后 react 路由器不重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45167972/

相关文章:

reactjs - 在 React 中,如何将动态变量传递给 const CSS 样式列表?

node.js - require 客户端实现同构 javascript 与 React 无法识别

redux - 将 RTK 查询与 Redux Persistor 结合使用

reactjs - 在 Create React App 中使用 React Router 排除生产路线

javascript - 将 'react-router' 迁移到 'react-router-dom' (v4)

javascript - 条件路由始终在页面刷新时重定向

javascript - React ES6 类转换不工作

javascript - 如何在 Material-UI Circular Progress 中添加额外的描边

javascript - Redux-Saga 为单个操作运行两次

reactjs - React Redux - 为什么在构造函数之前调用 mapStateToProps?