Il componente non si rimonta quando i parametri del percorso cambiano

Question

Sto lavorando a un'applicazione di reazione utilizzando il router di risposta. Ho una pagina progetto che ha un URL come segue:

myapplication.com/project/unique-project-id 

Quando i carichi componente del progetto, ho innescano una richiesta di dati per quel progetto dall'evento componentDidMount. Ora sto correndo in un problema in cui, se posso passare direttamente tra due progetti in modo che solo i cambiamenti id come questo ...

myapplication.com/project/982378632 
myapplication.com/project/782387223 
myapplication.com/project/198731289 

componentDidMount non viene attivato di nuovo in modo che i dati non viene aggiornata. C'è un altro evento del ciclo di vita che dovrei usare per attivare la mia richiesta di dati o una strategia diversa per affrontare questo problema?

Answer 1

Se il collegamento è diretto allo stesso percorso con solo un parametro diverso, non sta rimontando, ma invece riceve nuovi oggetti di scena. Pertanto, è possibile utilizzare la funzione componentWillReceiveProps(newProps) e cercare newProps.params.projectId.

Se si sta tentando di caricare i dati, si consiglia di recuperare i dati prima che il router gestisca la corrispondenza utilizzando metodi statici sul componente. Guarda questo esempio. React Router Mega Demo. In questo modo, il componente caricherà i dati e si aggiornerà automaticamente quando i parametri del percorso cambiano senza dover contare su componentWillReceiveProps.

Answer 2

Se è necessario rimontare un componente quando il percorso viene modificato, è possibile passare una chiave univoca all'attributo chiave del componente (la chiave è associata al percorso/alla rotta). Quindi, ogni volta che la rotta cambia, la chiave cambierà anche i trigger del componente React da smontare/rimontare. Ho ricevuto l'idea da this answer

Answer 3

react-router è danneggiato perché è necessario rimontare i componenti in qualsiasi posizione.

sono riuscito a trovare una correzione per questo problema però:

https://github.com/ReactTraining/react-router/issues/1982#issuecomment-275346314

In breve (si veda il link qui sopra per la piena informazioni)

<Router createElement={ (component, props) => 
{ 
    const { location } = props 
    const key = `${location.pathname}${location.search}` 
    props = { ...props, key } 
    return React.createElement(component, props) 
} }/> 

In questo modo sarà rimontare su qualsiasi URL cambia

Answer 4

Devi essere chiaro, che un cambio di percorso non causerà un aggiornamento della pagina, devi gestirlo da solo.

import theThingsYouNeed from './whereYouFindThem' 

export default class Project extends React.Component { 

    componentWillMount() { 

     this.state = { 
      id: this.props.router.params.id 
     } 

     // fire action to update redux project store 
     this.props.dispatch(fetchProject(this.props.router.params.id)) 
    } 

    componentDidUpdate(prevProps, prevState) { 
     /** 
     * this is the initial render 
     * without a previous prop change 
     */ 
     if(prevProps == undefined) { 
      return false 
     } 

     /** 
     * new Project in town ? 
     */ 
     if (this.state.id != this.props.router.params.id) { 
      this.props.dispatch(fetchProject(this.props.router.params.id)) 
      this.setState({id: this.props.router.params.id}) 
     } 

    } 

    render() { <Project .../> } 
}