Il componente non si rimonta quando cambiano i parametri del percorso

Sto lavorando a un'applicazione React utilizzando React-Router. Ho una pagina del progetto che ha un URL come segue:

myapplication.com/project/unique-project-id

Quando il componente del progetto viene caricato, faccio scattare una richiesta di dati per quel progetto dall'evento componentDidMount. Ora sto riscontrando un problema in cui se passo direttamente tra due progetti, solo l'id cambia in questo modo ...

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

componentDidMount non viene attivato di nuovo, quindi i dati non vengono aggiornati. C'è un altro evento del ciclo di vita che dovrei utilizzare per attivare la mia richiesta di dati o una strategia diversa per affrontare questo problema?

Se il collegamento si dirige verso la stessa rotta con solo un parametro diverso, non rimonta, ma riceve invece nuovi oggetti di scena. Quindi, potresti usare la componentWillReceiveProps(newProps)funzione e cercare newProps.params.projectId.

Se stai provando a caricare i dati, ti consiglio 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 bisogno di fare affidamento componentWillReceiveProps.

Se è necessario rimontare un componente quando viene modificato il percorso, è possibile passare una chiave univoca all'attributo chiave del componente (la chiave è associata al percorso / percorso). Quindi ogni volta che il percorso cambia, cambierà anche la chiave che attiva lo smontaggio / rimontaggio del componente React. Ho avuto l'idea da questa risposta

Ecco la mia risposta, simile ad alcune delle precedenti ma con codice.

<Route path="/page/:pageid" render={(props) => (
  <Page key={props.match.params.pageid} {...props} />)
} />

Devi essere chiaro, che un cambio di percorso non provocherà 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 .../> }
}

Se hai:

<Route
   render={(props) => <Component {...props} />}
   path="/project/:projectId/"
/>

In React 16.8 e versioni successive, usando gli hook , puoi fare:

import React, { useEffect } from "react";
const Component = (props) => {
  useEffect(() => {
    props.fetchResource();
  }, [props.match.params.projectId]);

  return (<div>Layout</div>);
}
export default Component;

Lì, stai solo attivando una nuova fetchResourcechiamata ogni volta che props.match.params.idcambia.

Sulla base delle risposte di @wei, @ Breakpoint25 e @PaulusLimma ho realizzato questo componente sostitutivo per <Route>. Questo rimonterà la pagina quando l'URL cambia, costringendo tutti i componenti nella pagina a essere creati e montati di nuovo, non solo nuovamente renderizzati. Tutti componentDidMount()e tutti gli altri hook di avvio vengono eseguiti anche al cambio di URL.

L'idea è di cambiare la keyproprietà dei componenti quando cambia l'URL e questo forza React a rimontare il componente.

Puoi usarlo come sostituto immediato <Route>, ad esempio in questo modo:

<Router>
  <Switch>
    <RemountingRoute path="/item/:id" exact={true} component={ItemPage} />
    <RemountingRoute path="/stuff/:id" exact={true} component={StuffPage} />
  </Switch>
</Router>

Il <RemountingRoute>componente è definito così:

export const RemountingRoute = (props) => {
  const {component, ...other} = props
  const Component = component
  return (
    <Route {...other} render={p => <Component key={p.location.pathname + p.location.search}
                                              history={p.history}
                                              location={p.location}
                                              match={p.match} />}
    />)
}

RemountingRoute.propsType = {
  component: PropTypes.object.isRequired
}

Questo è stato testato con React-Router 4.3.

La risposta di @wei funziona alla grande, ma in alcune situazioni trovo meglio non impostare una chiave di componente interna, ma instradare se stesso. Inoltre, se il percorso del componente è statico, ma si desidera solo che il componente rimonti ogni volta che l'utente vi naviga (forse per effettuare una chiamata api su componentDidMount ()), è utile impostare location.pathname sulla chiave del percorso. Con esso percorso e tutto il suo contenuto viene rimontato quando la posizione cambia.

const MainContent = ({location}) => (
    <Switch>
        <Route exact path='/projects' component={Tasks} key={location.pathname}/>
        <Route exact path='/tasks' component={Projects} key={location.pathname}/>
    </Switch>
);

export default withRouter(MainContent)

Ecco come ho risolto il problema:

Questo metodo ottiene il singolo elemento dall'API:

loadConstruction( id ) {
    axios.get('/construction/' + id)
      .then( construction => {
        this.setState({ construction: construction.data })
      })
      .catch( error => {
        console.log('error: ', error);
      })
  }

Chiamo questo metodo da componentDidMount, questo metodo verrà chiamato solo una volta, quando carico questa rotta per la prima volta:

componentDidMount() {   
    const id = this.props.match.params.id;
    this.loadConstruction( id )
  }

E da componentWillReceiveProps che verrà chiamato dalla seconda volta che carichiamo lo stesso percorso ma ID diverso, e chiamo il primo metodo per ricaricare lo stato e poi il componente caricherà il nuovo elemento.

componentWillReceiveProps(nextProps) {
    if (nextProps.match.params.id !== this.props.match.params.id) {
      const id = nextProps.match.params.id
      this.loadConstruction( id );
    }
  }

Se stai usando Class Component, puoi usare componentDidUpdate

componentDidMount() {
    const { projectId } = this.props.match.params
    this.GetProject(id); // Get the project when Component gets Mounted
 }

componentDidUpdate(prevProps, prevState) {
    const { projectId } = this.props.match.params

    if (prevState.projetct) { //Ensuring This is not the first call to the server
      if(projectId !== prevProps.match.params.projectId ) {
        this.GetProject(projectId); // Get the new Project when project id Change on Url
      }
    }
 }

Puoi utilizzare il metodo fornito:

useEffect(() => {
  // fetch something
}, [props.match.params.id])

quando è garantito che il componente riesca di nuovo dopo il cambio di rotta, puoi passare gli oggetti di scena come dipendenza

Non è il modo migliore, ma abbastanza buono per gestire ciò che stai cercando secondo Kent C. Dodds : Considera di più quello che vuoi che sia successo.

react-router è rotto perché deve rimontare i componenti su qualsiasi cambiamento di posizione.

Tuttavia, sono riuscito a trovare una correzione per questo bug:

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

In breve (vedi il link sopra per tutte le informazioni)

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

Questo lo farà rimontare su qualsiasi modifica dell'URL