React router v4使用声明式重定向而不呈现当前组件

Question

我正在使用类似的代码在用户登录后在我的应用程序中重定向。代码如下所示：

import React, { Component } from 'react'
import { Redirect } from 'react-router'

export default class LoginForm extends Component {
  constructor () {
    super();
    this.state = {
      fireRedirect: false
    }
  }

  submitForm = (e) => {
    e.preventDefault()
    //if login success
    this.setState({ fireRedirect: true })
  }

  render () {
    const { from } = this.props.location.state || '/'
    const { fireRedirect } = this.state

    return (
      <div>
        <form onSubmit={this.submitForm}>
          <button type="submit">Submit</button>
        </form>
        {fireRedirect && (
          <Redirect to={from || '/home'}/>
        )}
      </div>
    )

  }
}

触发成功登录时正常工作。但存在这样的情况，即登录的用户进入登录页面并应被自动重定向到主页页面（或任何其他页面）。

如何使用重定向组件而不呈现当前组件，以及（据我所知）不将命令推送到历史记录（例如，componentWillMount）中？

Answer 1

这里有另一个解决方案，它根本不接触React的东西。例如，如果你需要在redux-saga内部导航。

有文件history.js：

import {createBrowserHistory} from 'history';
export default createBrowserHistory();

在您定义路由的地方，不要使用浏览器路由器，而只使用常规

import history from 'utils/history';

...

<Router history={history}>
  <Route path="/" component={App}/>
</Router>

就这样了。现在，您可以使用相同的历史导入和推送新路由。

在应用程序的任何部分：

import history from 'utils/history';
history.push('/foo');

在传奇故事中：

import {call} from 'redux-saga/effects';
import history from 'utils/history';

 ... 

history.push('/foo');
yield call(history.push, '/foo');

Answer 2

解决方案1

您可以使用路由器HOC通过道具访问历史记录。

使用路由器导入。

import {
  withRouter
} from 'react-router-dom';

然后用HOC包裹。

// Example code
export default withRouter(connect(...))(Component)

现在您可以访问this.props.history。例如，使用它与组件didMount（）。

componentDidMount() {
  const { history } = this.props;

  if (this.props.authenticated) {
    history.push('/private-route');
  }
}

解决方案2好多了

下面是关于反应训练的例子。

这对你来说很合适。

但是您只需要创建LoginRoad来处理您描述的问题。

const LoginRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
        <Redirect to={{
          pathname: '/private-route',
          state: { from: props.location }
        }} />
      ) : (
        <Component {...props} />
      )
  )} />
);

和内部

<Route path="/login" component={Login}/>

具有

<LoginRoute path="/login" component={Login}/>

现在，每当有人试图以身份验证用户身份访问/login路由时，他将被重定向到/private route。这是一个更好的解决方案，因为如果不满足条件，它不会装载您的LoginComponent。