Question

我正在使用与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')
);

如果我删除<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。

如何避免重定向两次（react-router-redux）？

1 个答案: