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;

在登录组件中，我想在成功登录后将用户重定向回专用路由：

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

当用户尝试访问私有路由时，try-catch块中的pathname将获得一个适当的值；如果用户要登录，则使用常规路由，默认值为/。< / p>

我有一个奇怪的问题，this.props.history.push()对于硬编码路径正确地重定向，但是对于从状态到它的路径，它只是简单地重定向到/。我找不到这个特定问题的答案。

这可能与这个问题无关，但我只想提到Login和Address这两个组件都已连接到Redux存储。

Answer 1

由于this.setState是异步触发的，因此您应该将它放在try catch中：

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语句的异步函数来评估this.props.history ...是否存在，以更简洁的方式进行操作。希望对您有所帮助。

history.push（）重定向至硬编码路径，但不重定向至国家提供的路径

1 个答案: