如何使用React和React Router正确解析查询字符串以重置密码

时间:2019-01-31 23:53:30

标签: reactjs react-router-v4 forgot-password

我正在尝试更新React Redux节点jwt auth设置,并且需要解析查询字符串以获取重置密码部分。单击电子邮件中的“重置密码”后显示的页面。

该按钮正常工作,并且网址已形成,但页面空白:(

该应用最初是用RRv2构建的,现已更新为RRv4,但是我需要弄清楚如何正确解析查询字符串。我已经从npm安装了查询字符串pkg,但是正确使用它是另一回事...

以下是通过按电子邮件中的按钮获取的示例网址:

http://localhost:8080/reduxauth/reset-password/new?email=test@test.com&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI1YzNjYTk5Y2Q0MDI0MjA0ZTc0NDc4MzAiLCJpYXQiOjE1NDg5NzA3NTk4MDB9.sodSpaDEcYsAFImHwTi8GC077xuYk73_AF7KlZAQQg8

这是到目前为止的当前代码:

// https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
  componentDidMount() {
  // UNSAFE_componentWillMount() {
  // componentWillMount() { // default
    const { location } = this.props; // added
    const { email, token } = queryString.parse(this.props.location.search); // added
    // const { email, token } = this.props.location.query; // default
    // console.log(values);
    // console.log(values.email);
    // console.log(values.token);

    this.props.verifyResetPassword({ email, token });
  }


handleFormSubmit(props) {
    const { email, token } = queryString.parse(this.props.location.search);
    // const { email, token } = this.props.location.query; // default

    props.email = email;
    props.token = token;

    this.props.resetPasswordNew(props);
  }

The only error I get from the Google Chrome console is:
Failed to load resource: the server responded with a status of 404 (Not Found)

在控制台中单击该文件链接将导致此:

http://localhost:8080/reduxauth/reset-password/main.63ca6d4842e574292c9a.js?63ca6d4842e574292c9a

使用

无法获取/reduxauth/reset-password/main.63ca6d4842e574292c9a.js

0 个答案:

没有答案