代码之家  ›  专栏  ›  技术社区  ›  Gabin

react router dom<Redirect/>是否不能与syncHistoryWithStore一起使用?

  •  0
  • Gabin  · 技术社区  · 9 年前

    / 路由要求用户登录,因此我将其重定向到 /signin 如果他们没有。

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

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

    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')
    );
    1 回复  |  直到 9 年前
        1
  •  0
  •   Gabin    9 年前

    正如塔拉卡指出的那样,自述文件提到react路由器v4还不受支持。