Как обработать перенаправление на тот же маршрут (с параметрами запроса) с помощью React Router v4 - PullRequest
Новая
       61

Как обработать перенаправление на тот же маршрут (с параметрами запроса) с помощью React Router v4

0 голосов
/ 24 октября 2018

Так что я думаю, что этот вопрос задавался пару раз, но не уверен, что он был задан соответствующим образом.Вот что я прохожу - у меня есть следующий маршрут: 

<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.Соответствующее представление отображается в зависимости от типа предложения, с которым мы имеем дело.

Каждый раз, когда для предложения делается подтверждение принятия или отклонения, я хочу перенаправить пользователя к следующему предложению в очереди ивставьте новый URL в стек истории браузера, чтобы я мог получить бесплатное поведение кнопки «Назад».

Итак, если мы начнем с https://myreactapp.com/proposal/id1, мой ReviewProposalView пройдет весь жизненный цикл, достигнув componentDidMount в конце без проблем.Я хочу, чтобы, когда пользователь переходит на https://myreactapp.com/proposal/id2 в результате подтверждения предложения и перенаправления через <Redirect />, я хочу, чтобы весь жизненный цикл компонента повторялся с самого начала и проходил через логику в componentDidMountопять же - по существу продвигая характеристику неизменности с новым экземпляром / началом.

То, что у меня сейчас есть, этого не делает, потому что ReviewProposalView уже смонтирован, когда вы нажмете второй URL.Мои инстинкты говорят мне, что то, как я структурировал свои компоненты, неверно, и я в корне неправильно понимаю что-то о жизненных циклах компонентов React, когда они связаны с <Route />.Любое руководство очень ценится.

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Попробуйте добавить ключ к маршруту, как 

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

При смене типа старый компонент размонтируется и реагирует, монтирует новый.Таким образом, жизненные циклы ReviewProposalView начинаются заново.

0 голосов
/ 24 октября 2018

Привет, я тоже новичок в React.js, но я понял вашу проблему, у меня уже было то же самое.

На самом деле ComponentDidMount позвонит, если вы впервые пойдете по этому маршруту, и в вашем случае вы не будетеизменение маршрута, но изменение параметров вашего запроса.Таким образом, ComponentDidMount не будет вызываться.

Вы можете попробовать componentWillReceiveProps вместо ComponentDidMount в вашем случае.

Это приведет к повторной визуализации компонента. Вам необходимо обработать определенные изменения ваших реквизитов.Этот пример поможет вам использовать хук componentWillReceiveProps.https://stackoverflow.com/a/32414771/1506955

...