reactjs - 如何使用 React Router v4 处理重定向到同一路由(使用查询参数)

Question

所以我认为这个问题已被问过几次，但不确定是否被适本地问过。这是我正在经历的——我有一条路线如下:

<Route exact path={RoutePaths.PROPOSAL_ID} component={ReviewProposalView} />

RoutePaths.PROPOSAL_ID 的值是/proposal/:id

内部 ReviewProposalView , 我有以下 componentDidMount()和 render()方法:

class ReviewProposalView extends Component<Props, State> {
  state = {
    redirect: false,
    redirectTo: '',
    currentProposalIdIndex: // whatever current value,
    proposalIds: this.props.location.state.proposalIds,
    proposalMap: this.props.location.state.proposalMap,
    currentProposal: null
  }

  componentDidMount () {
    const {location} = this.props

    parseValueFromKeyInQueryString({queryString: location.search, key: 't'}, {
      noValueFound: () => {
        this.setState({
          redirect: true,
          redirectTo: RoutePaths.NOT_FOUND
        })
      },
      valueFound: (type: string) => {
        const {proposalMap} = this.state
        const proposalId = // ...assume we got this from pathname

        this.setState({
          currentProposal: proposalMap[proposalId]
        })
      }
    })
  }

  _confirmMatch = (confirmedProposal: Proposal) => {
    // store data on confirmedProposal
    // get next proposalId from this.state.proposalIds list

    const nextProposal = proposalMap[nextProposalId]

    this.setState({        
      redirect: true,
      redirectTo: {
        pathname: `${RoutePaths.PROPOSAL}/${nextProposal.id}`,
        search: `?t=${nextProposal.type}`,
        state: {
          currentProposalIdIndex: nextProposalIndex,
          proposalIds,
          proposalMap
        }
      }
    })
  }

  render () {
    const {currentProposal, redirect, redirectTo} = this.state

    if (redirect) {
      return <Redirect push to={redirectTo} />
    }

    const ProposalComponent = ProposalComponentMap[currentProposal.type]

    return (
        <div>
          <h1>Review Proposals Page</h1>
          <ProposalComponent {...this.props} key={currentProposal.id} proposal={currentProposal}
                             confirmProposal={this._confirmProposal} />
        </div>
    )
  }
}

// ====================================

const ProposalComponentMap = {
 'PRODUCT': ProductProposalView
 'SERVICE': ServiceProposalView 
}

由此产生的体验是，用户浏览了一份提案列表，然后选择接受或拒绝该提案。有两种不同类型的提案(ProductProposalView 或 ServiceProposalView)，用户可以在此父级 ReviewProposalView 中与之交互。 .根据我们正在处理的提案类型呈现适当的 View 。

每次对提案进行接受或拒绝确认时，我想将用户重定向到队列中的下一个提案，并在浏览器历史堆栈中推送一个新 URL，这样我就可以免费获得后退按钮行为。

所以如果我们从 https://myreactapp.com/proposal/id1 开始, 我的 ReviewProposalView经历了整个生命周期命中 componentDidMount最后没问题。我的愿望是当用户转到 https://myreactapp.com/proposal/id2 时作为确认提案并通过 <Redirect /> 重定向的结果, 我希望组件的整个生命周期从头开始重复并贯穿 componentDidMount 中的逻辑再次——本质上是通过一个新的实例/开始来提升不变性的特性。

我目前所拥有的无法实现这一点，因为 ReviewProposalView当您点击第二个 URL 时已经安装。我的直觉告诉我，我构建组件的方式是错误的，当它们与 <Route /> 耦合时，我从根本上误解了 React 组件的生命周期。 .非常感谢任何和所有指导。

Answer 1

你好，我也是 React.js 的新手，但我理解你的问题，我已经有过同样的经历。

实际上，如果您第一次访问该路由，ComponentDidMount 将会调用，在您的情况下，您没有更改路由，而是更改了查询参数。所以 ComponentDidMount 不会被调用。

在您的情况下，您可以尝试使用 componentWillReceiveProps 而不是 ComponentDidMount。

这将导致重新渲染组件。您需要处理 Prop 的特定更改。此示例将帮助您使用 componentWillReceiveProps钩。 https://stackoverflow.com/a/32414771/1506955