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

Question

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

我的应用有两个页面 /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')
);

如果我删除 <Redirect to="/login" />如果用户已经登录，当他打开页面时 /home ，应用程序会直接进入首页，这很好。

但是，对于 <Redirect to="/login" /> , 当用户打开页面时 /home , 该应用程序将首先重定向到 /login , 然后回到 /home .

如何避免这种重定向两次？谢谢

Answer 1

使用 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 匹配，也会执行 Redirect。