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

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

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>
    )

  }
}

import React，{Component}来自“React”
从“react router”导入{Redirect}
导出默认类LoginForm扩展组件{
构造函数（）{
超级（）；
此.state={
fireRedirect:错误
}
}
提交形式=（e）=>{
e、 预防默认值（）
//如果登录成功
this.setState（{fireRedirect:true}）
}
渲染（）{
const{from}=this.props.location.state | |'/'
const{fireRedirect}=this.state
返回(
提交
{fireRedirect&&(
)}
)
}
}

当成功登录被触发时，工作正常。但是，在这种情况下，登录用户进入登录页面，应该自动重定向到“主页”（或任何其他页面）

---

如何使用重定向组件而不呈现当前组件，并且（据我所知）不强制推送到历史记录（例如，在

componentWillMount

）？

解决方案1

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

使用路由器导入

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

然后用HOC包起来

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

现在您可以访问

this.props.history

。例如，将其与

componentDidMount（）

一起使用

---

解决方案2更好

下面是一个例子

这对你来说很合适

但您只需要创建

LoginRoute

来处理您描述的问题

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

constloginroute=（{component:component，…rest}）=>(
(
伪造的。是否已验证(
) : (
)
)} />
);

在

内部，只需更换

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

与

---

现在，每当有人试图以身份验证用户身份访问

/login

路由时，他将被重定向到

/private route

。这是一个更好的解决方案，因为如果不满足条件，它就不会装载您的

LoginComponent

。

这里有另一个解决方案，它根本不涉及React内容。例如，如果您需要在redux传奇中导航

拥有文件history.js：

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

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');

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

在传奇中：

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

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');

---

你使用了错误的方法。不应在组件内部单独使用重定向。相反，您必须将组件与重定向一起放入

路由

。请参阅中的示例。谢谢，是的，我的方法有点错误。我现在已经在路由器中定义了所有路由和重定向。解决方案2似乎就是我要寻找的！现在就来看看。它确实有效，我正在我的项目中使用这种方法。如果您需要帮助，请告诉我。解决方案2非常有效，我可以在我的组件中消除路由逻辑。谢谢！解决方案1存在一些synthax问题。导入为react路由器：

import{withRouter}来自“react路由器”

和export default with router括号应包括以下内容：

export default with router（connect（…）（Component））