Question

我想要实现的是调用基于前一个路径url的方法（我正在使用react-router）。

上一个路径网址如

http://www.website.com/signin?f=world-news&join=true&nextPath=%2Ff%2Fworld-news

并在成功登录用户后重定向到

http://www.website.com/f/world-news

现在，当我的组件已挂载并且我看到新的URL时，我想触发一个方法，但前提是用户是从我在问题中指定的上一个URL登录的。上一个URL中的唯一字符串是&join=true。如果上一个路径包含componentWillReceiveProps

，如何在&join=true中调用方法

示例伪代码看起来像

import React, { PropTypes, Component } from "react";
import MyComponentView from "./view";

class MyComponent extends Component {
    componentWillReceiveProps(nextProps) {
        if ( // prevoius path logic check ) {
            this.props.myMethod(); // Calling the method over here
        }
    }

    render() {
        return (
            <MyComponentView {...this.props} />
        );
    }
}

export default MyComponent;

更新：使用重定向功能添加代码

_getCurrentPathName() {
        let path = window.location.pathname + window.location.search;
        if (path === "/") {
            return undefined;
        }
        return path;
    }

transitionToSigninAndAutoJoin(query) {
    const q = Object.assign({}, query, {
        f: this.props.params.slug,
        nextPath: this._getCurrentPathName(),
        join: true
    });

    this.transitionTo({ pathname: "/signin", query: q });
}

总之，当我单击组件中的某个按钮时，它会检查用户是否已登录。如果用户已登录，我将调用原始代码示例中提及的方法myMethod()。

如果没有，我将用户重定向到登录页面（调用transitionToSigninAndAutoJoin），该页面采用当前路径并重定向到登录路径。对于例如如果我当前的路径名是http://www.website.com/f/world-news并且用户未登录，则新的重定向网址看起来像http://www.website.com/signin?f=world-news&join=true&nextPath=%2Ff%2Fworld-news

成功登录用户被重定向回http://www.website.com/f/world-news，但现在我想在安装组件时自动呼叫myMethod()。但是，myMethod()只应在前一个网址包含&join=true

时自动调用

Answer 1

您可以在重定向时向location descriptor添加state对象，而不是依赖以前的网址。

function redirectAfterSignin() {
  const {
    nextPath,
    join = false
  } = this.props.location.query

  this.router.push({
    pathname: nextPath,
    state: { join }
  })
}

然后在您的其他组件中，您只需检查location.state道具以确定join值。

class MyComponent extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.location.state.join) {
      // do something
    }
  }
}

根据以前的路径url调用componentWillReceiveProps上的方法

1 个答案: