history.push () перенаправляет по жестко закодированному пути, но не по пути, указанному государством

Question

У меня есть следующий частный маршрут, который при попытке доступа неавторизованного пользователя перенаправляет пользователя на компонент входа (см. Ниже).

<PrivateRoute path="/checkout/step1" component={Address} />

Код для PrivateRoute следующий:

import React from "react";
import { Redirect, Route } from "react-router-dom";

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      localStorage.getItem("token") ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

export default PrivateRoute;

В моем компоненте Login я хочу перенаправить пользователя обратно на частный маршрут после успешного входа в систему:

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
      path: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount() {
    let pathname = "/";
    // need try-catch, since 
    // this.props.history.location.state.from.pathname
    // might be inaccessible resource
    try {
      pathname = this.props.history.location.state.from.pathname;
    } catch (err) {
      console.log("Resource inaccessible.");
    }
    this.setState({ path: pathname });
  }

  handleSubmit = e => {
    e.preventDefault();
    // authentication
    this.props.onAuth(this.state.email, this.state.password);

    // this.props.history.push(this.state.path); // not working
    // this.props.history.push("/about"); // working fine
  };

  renderLoginForm = token => {
    // ... skipped
  };

  render() {
    const { token } = this.props;

    return (
      <React.Fragment>
        {this.renderLoginForm(token)}
      </React.Fragment>
    );
  }
}

pathname в блоке try-catch получает правильное значение, когдапользователь пытается получить доступ к частному маршруту и ​​по умолчанию / в случае, если пользователь хочет войти, используя обычный маршрут.

У меня есть странная проблема, которая this.props.history.push() перенаправляет правильно для жестко закодированного пути,но для пути из состояния он просто перенаправляет на /.Я не смог найти ответ на эту конкретную проблему.

Это может быть неуместно для этого вопроса, но позвольте мне упомянуть, что оба компонента Login и Address подключены к хранилищу Redux.

Answer 1

Так как this.setState запускается асинхронно, вы должны поместить его в ловушку try в вашем случае:

componentDidMount() {
let pathname = "/";
// need try-catch, since 
// this.props.history.location.state.from.pathname
// might be inaccessible resource
try {
  pathname = this.props.history.location.state.from.pathname;
  this.setState({ path: pathname });
} catch (err) {
  console.log("Resource inaccessible.");
  this.setState({ path: pathname });
}   
}

Вы также можете сделать это более чистым способом, используя асинхронную функцию с оператором if для оценки, если это.props.history ... существует.Надеюсь, это поможет.