Reactjs 第一次登录后不重定向。但在强制重定向并再次执行登录操作后重定向

我有一个登录表单，单击它可以调用以下函数

它从api获取响应（如果有效），设置cookie，然后使用

this.props.history.push（）

但我面临的问题是，当我第一次登录时，重定向将无法工作。它设置了所有的cookies等等，但它实际上从未将用户重定向到所需的目录。因此，我不得不通过在浏览器搜索栏中键入我想要的路线来重定向自己

这意味着，一旦我强迫自己进入所需的目录，如果我注销（基本上是删除cookies），并尝试再次登录。这次重定向有效

它会一直工作到我用ctrl+F5清除所有缓存，这恰好导致了我在第一次登录时遇到的相同问题，因此我不得不再次重定向到manuall

编辑：这就是我的路线的外观

<BrowserRouter>
                <Switch>

                    <Route exact path="/login" render={(props) => <LoginPage {...props}/>} />

                    <PrivateRoute authed={this.state.isAuthenticated} exact path="/" render={(props) => <RegisterPage />} />

                </Switch>
            </BrowserRouter>

从“React”导入React； 从“react router”导入{Redirect}

export default ({ component: Component, render: renderFn, authed,  ...rest }) =>{
  //The privateroute is fed with the auth state of app.js and evaluates the render based on that . If flase always renders "/"
  if (Component){
    return (
      <Route
      {...rest}
      render={props =>
        authed === true ? (
          <Component {...props} />
        ) : (
            <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
          )
      }
    />
    )
  } else {
    return ( //Second case is for iframe based renders
      <Route {...rest} render={props => authed === true ? renderFn(props) : <Redirect to={{ pathname: '/login', state: { from: props.location } }} /> } /> 
      );
  }
}

编辑：登录页面道具

  {"history":{"length":15,"action":"POP","location":{"pathname":"/login","search":"?email=test4%40test.com&password=test","hash":""}},"location":{"pathname":"/login","search":"?email=test4%40test.com&password=test","hash":""},"match":{"path":"/login","url":"/login","isExact":true,"params":{}}}

何时何地设置“已验证”？-莱姆·罗7分钟前
@在我的app.js中的lehm.ro在componentDidMount（）期间，默认isAuthenticated为false–mouchin777 6分钟前 然后，一旦你重定向，你必须使用this.setState来实现它，否则你的私有路由将不会显示。但为此，您需要将true状态传递给app.js，然后触发一个函数来设置isAuthenticated true的状态，然后重定向到该路由

将您的历史记录设置为在app.js中工作，而无需道具传递：

要使用

应用程序

组件中的

历史

，请将其与

路由器

一起使用。只有在您的 组件未接收

路由器道具

当您的组件是 路由器渲染的组件或您尚未通过路由器 支持它或当组件未链接到路由器时 所有和作为管线的单独组件进行渲染

import React from 'react';
import { Route , withRouter} from 'react-router-dom';
import Dashboard from './Dashboard';
import Bldgs from './Bldgs';

var selectedTab;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    selectedTab = 0;
  }

  handleClick(value) {
    selectedTab = value;
    // console.log(selectedTab);
    this.props.history.push('/Bldgs');
    // console.log(this.props);
  }

  render() {
    var _this = this;

    return (
      <div>
        <Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />
        <Route path="/Bldgs" component={Bldgs} curTab={selectedTab} />
      </div>
    );
  }
}

export default withRouter(App);

在登录页面中

handleSubmit(event) {
    const { email, password } = this.state;
    this.props.login(email, password)
    event.preventDefault();
}

---

当您执行

push（）

功能时，控制台中发生了什么？您能展示一下如何设置路由吗？@lehm.ro编辑了question@PraveenKumarPurushothaman我用日志检查道具的渲染效果。实际上，当我第一次加载登录页面时，我可以看到构造函数呈现的道具，然后，当我单击函数时，我可以看到一些道具（不是构造函数呈现的道具），然后突然页面重新加载，我再次看到构造函数呈现的道具，我将为此编写响应…没有运行它..但应该可以工作。如果不让我知道，我会再看一遍：）VM346 main.chunk.js:498 Uncaught TypeError:this.props.login不是LoginPage.handleSubmit（VM346 main.chunk.js:498）的函数试图解决这个问题，请确保login arrow函数与routes位于同一个组件中。是的，这只是我的输入错误。为了修复您的历史记录，这样我们就不会重复，请查看以下线程：一旦路由器/历史记录正常工作，它将正常工作。祝你在下一个问题上好运。调试就是生活！：D

 handleSubmit(event) {
        const { email, password } = this.state;
        this.props.login(email, password)
        event.preventDefault();


    }

  {"history":{"length":15,"action":"POP","location":{"pathname":"/login","search":"?email=test4%40test.com&password=test","hash":""}},"location":{"pathname":"/login","search":"?email=test4%40test.com&password=test","hash":""},"match":{"path":"/login","url":"/login","isExact":true,"params":{}}}

import React from 'react';
import { Route , withRouter} from 'react-router-dom';
import Dashboard from './Dashboard';
import Bldgs from './Bldgs';

var selectedTab;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    selectedTab = 0;
  }

  handleClick(value) {
    selectedTab = value;
    // console.log(selectedTab);
    this.props.history.push('/Bldgs');
    // console.log(this.props);
  }

  render() {
    var _this = this;

    return (
      <div>
        <Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />
        <Route path="/Bldgs" component={Bldgs} curTab={selectedTab} />
      </div>
    );
  }
}

export default withRouter(App);

<Route exact path="/login" render={(props) => <LoginPage login={this.login} {...props}   />} />

login = (email, password) => {
    var thiscomponent = this;
    axios({
        method: 'post',
        url: 'http://localhost:3003/login',
        data: qs.stringify({ email, password }),
        headers: {
            'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
        }
    }).then(res => {
        console.log("set cookie")
        //the accestoken is set as a cookie in order to check routes
        Cookies.set('accesstoken', res.data.accesstoken);
        console.log("those are the props")
        console.log(this.props);
        this.setState({ isAuthenticated: true }, () => {
           thiscomponent.props.history.push('/'); //the bug
        })

    }).catch(err => {
        console.log(err)
    })  
}

handleSubmit(event) {
    const { email, password } = this.state;
    this.props.login(email, password)
    event.preventDefault();
}