Как получить доступ к this.props.match.params вместе с другими реквизитами?

Question

У меня есть этот код в родительском компоненте:

<Route path='/champions/:id' render={(props) => <ChampionDetails {...props} match={this.handleMatch}/>}/>

, где свойство соответствия будет функцией, которая извлекает данные из дочернего компонента (ChampionDetails). Фрагмент моего компонента ChampionDetails (дочерний):

    import React, { Component } from 'react';

    class ChampionDetails extends Component {
      state = {
        champId:this.props.match.params.id,
        champData:null,
        match:false
      }

      componentDidMount(){
        console.log('ChampionDet mounted')
        this.handleChampInfo();
        console.log(this.props.match)
      }

      componentDidUpdate(){
        console.log('ChampionDet updated')
      }


      handleChampInfo=()=>{
        let champData = [];
        let id = this.state.champId
        console.log(id)
        fetch('/api/getChampion?id='+id)
          .then(data=> { return data.json() })
          .then(json=> {
            console.log(json.data);
            champData.push(json.data);
            this.setState({
              champData:json.data,
              match:true
            })
            this.props.match(true)
            // this.props.history.push('/champions/'+id)
          })
          .catch(err=>{
            console.log(err)
          })
      }

      render(){
        return(
          <div>
            <p>{this.state.champId}</p>
            {this.state.champData===null ? null:<p>{this.state.champData.roles}</p>}
          </div>
        )
      }
    }

    export default ChampionDetails;

Проблема здесь в том, что если у меня есть match = {} в маршруте моего родителя, то this.props.match.params.id станет неопределенным. Если я удаляю match = {}, я могу получить this.props.match.params.id

Я хотел бы знать, возможно ли передавать другие реквизиты, пока у меня есть доступ к this.props.match.params.id в моем случае.

Любая помощь будет высоко ценится!

Answer 1

match prop является частью react-reouter-dom, поэтому, создав другой реквизит под названием match, вы перезаписываете его.

самый простой способ просто переименовать match={this.handleMatch}/>} во что-то еще matchHandler={this.handleMatch}/>}

если необходимо использовать имя match, уничтожьте его как const {matchHandler : match} = this.props

Answer 2

Если вы используете react-router version> = 4, вы сможете получить доступ к параметрам маршрутизатора для любого компонента внутри маршрутизатора через withRouter HoC. Например:

import { withRouter } from 'react-router-dom';
...
export withRouter(ChampionDetails);

Answer 3

Вы можете передать matchProps в качестве реквизитов от маршрутизатора, this.props для любых реквизитов от родителя, а затем просто избегать перезаписи реквизитов - ваш match реквизит переопределяет реквизиты из маршрута:

<Route path='/champions/:id' render={(matchProps) =>
  <ChampionDetails
    {...matchProps}
    {...this.props}
    handleMatch={this.handleMatch}
  />
}/>

Когда вы распространяете {...props}, ваша match опора переопределяет реакционный маршрутизатор match.