Question

尝试访问需要某些权限的网页时，我正尝试将用户重定向到登录页面。基本上，/路由要求用户登录，因此如果不是，我会将其重定向到/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')
);

Answer 1

正如Tharaka指出的那样，自述文件提到反应路由器v4尚不支持。

react-router-dom <redirect>是否与syncHistoryWithStore不兼容？

1 个答案: