【问题标题】:Is react-router-dom <Redirect /> not working with syncHistoryWithStore?react-router-dom <Redirect /> 不能与 syncHistoryWithStore 一起使用吗?
【发布时间】:2018-01-28 18:21:25
【问题描述】:

在尝试访问需要某些权限的页面时,我试图将用户重定向到登录页面。基本上,/ 路由要求用户登录,所以如果他们没有登录,我会将他们重定向到 /signin

使用 react-router-redux 的 syncHistoryWithStore,重定向就不会发生。当我删除它时,它会按预期工作。

syncHistoryWithStore 是否与最新版本的 react-router-dom 不兼容?

这是reproduction。您可以取消注释不使用 syncHistoryWithStore 的历史记录行,并查看它是否按预期工作。

还将代码嵌入到 stackoverflow 上。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { createBrowserHistory } from 'history';
import { Router, Route, Redirect } from 'react-router-dom';
import { syncHistoryWithStore, routerReducer } from 'react-router-redux';

const store = createStore(
  combineReducers({
    routing: routerReducer
  })
);

const history = syncHistoryWithStore(createBrowserHistory(), store);
//const history = createBrowserHistory();

function SignIn(){
  return (
    <div>This is SignIn.</div>
  );
}

function Home(){
  return (
    <div>This is Home.</div>
  );
}

const isLoggedIn = false;

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <Route exact path="/signin" component={SignIn} />
        <Route
          exact
          path="/"
          render={() => isLoggedIn ? <Home /> : <Redirect to="/signin" />}
        />
      </div>
    </Router>
  </Provider>,
  window.document.getElementById('root')
);

【问题讨论】:

  • react-router-redux 不支持 react-router v4。请参阅自述文件github.com/reactjs/react-router-redux
  • 谢谢伙计,我被所有的信息淹没了,我没有注意到那句话。 ??????

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


【解决方案1】:

正如 Tharaka 所指出的,自述文件提到 react-router v4 尚不支持。

【讨论】:

    猜你喜欢
    • 2021-03-15
    • 2016-09-27
    • 1970-01-01
    • 1970-01-01
    • 2017-05-19
    • 2020-11-22
    • 2017-09-28
    • 1970-01-01
    • 2018-07-31
    相关资源
    最近更新 更多