javascript-如何避免两次重定向(react-router-redux)？

我正在使用与react-router 4.x兼容的the next (5.0.0) version react-router-redux.

我的应用程序有两个页面/ login和/ home.

如果用户访问的页面不存在,我试图将页面重定向到/ login.这是我的代码

import { Route, Redirect } from 'react-router-dom';
import { ConnectedRouter, routerMiddleware, push } from 'react-router-redux';

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route path="/login" render={() => (
          isSignedIn ? <Redirect to="/home" /> : <Login />
        )}/>

        <Route path="/home" component={Home} />

        <Redirect to="/login" />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

如果我删除<重定向到=“ / login” />如果用户已经登录,则打开页面/ home时,该应用将直接进入主页,这很好.

但是,使用< Redirect to =“ / login” /&gt ;,当用户打开页面/ home时,应用程序将首先重定向到/ login,然后返回到/ home. 如何避免两次重定向？谢谢

解决方法:

利用Switch,以便呈现第一个匹配的路由

import {Switch} from 'react-router';

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route path="/login" render={() => (
          isSignedIn ? <Redirect to="/home" /> : <Login />
        )}/>

        <Route path="/home" component={Home} />

        <Redirect to="/login" />
      </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

您遇到的情况是,即使/ home匹配,也会执行重定向.

标签：react-router-dom,reactjs,react-router-redux,javascript
来源： https://codeday.me/bug/20191025/1931489.html