El componente no se vuelve a montar cuando cambian los parámetros de ruta

Estoy trabajando en una aplicación de reacción usando react-router. Tengo una página de proyecto que tiene una URL de la siguiente manera:

myapplication.com/project/unique-project-id

Cuando se carga el componente del proyecto, activo una solicitud de datos para ese proyecto desde el evento componentDidMount. Ahora me encuentro con un problema en el que si cambio directamente entre dos proyectos, solo la identificación cambia así ...

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

componentDidMount no se activa de nuevo, por lo que los datos no se actualizan. ¿Hay algún otro evento del ciclo de vida que deba utilizar para activar mi solicitud de datos o una estrategia diferente para abordar este problema?

Si el enlace se dirige a la misma ruta con solo un parámetro diferente, no se está volviendo a montar, sino que recibe nuevos accesorios. Entonces, podría usar la componentWillReceiveProps(newProps)función y buscar newProps.params.projectId.

Si está intentando cargar datos, le recomendaría obtener los datos antes de que el enrutador maneje la coincidencia utilizando métodos estáticos en el componente. Mira este ejemplo. React Router Mega Demo . De esa manera, el componente cargaría los datos y se actualizaría automáticamente cuando cambiaran los parámetros de ruta sin necesidad de depender de ellos componentWillReceiveProps.

Si necesita volver a montar un componente cuando cambia la ruta, puede pasar una clave única al atributo de clave de su componente (la clave está asociada con su ruta / ruta). Entonces, cada vez que cambia la ruta, la clave también cambiará, lo que activa el componente React para desmontar / volver a montar. Tengo la idea de esta respuesta

Aquí está mi respuesta, similar a algunas de las anteriores pero con código.

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

Tienes que tener claro que un cambio de ruta no provocará una actualización de página, tienes que manejarlo tú mismo.

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 .../> }
}

Si usted tiene:

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

En React 16.8 y superior, usando ganchos , puede hacer:

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

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

Allí, solo está activando una nueva fetchResourcellamada cada vez que props.match.params.idcambia.

Basado en las respuestas de @wei, @ Breakpoint25 y @PaulusLimma, hice este componente de reemplazo para <Route>. Esto volverá a montar la página cuando cambie la URL, lo que obligará a que todos los componentes de la página se creen y monten de nuevo, no solo que se vuelvan a representar. Todos componentDidMount()y todos los demás enlaces de inicio se ejecutan también en el cambio de URL.

La idea es cambiar la keypropiedad de los componentes cuando cambia la URL y esto obliga a React a volver a montar el componente.

Puede usarlo como un reemplazo directo para <Route>, por ejemplo, esto:

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

El <RemountingRoute>componente se define así:

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
}

Esto ha sido probado con React-Router 4.3.

La respuesta de @ wei funciona muy bien, pero en algunas situaciones me parece mejor no establecer una clave del componente interno, sino la ruta en sí. Además, si la ruta al componente es estática, pero solo desea que el componente se vuelva a montar cada vez que el usuario navegue hacia él (tal vez para hacer una llamada de API en componentDidMount ()), es útil establecer location.pathname en la clave de la ruta. Con su ruta y todo su contenido se vuelve a montar cuando cambia la ubicación.

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)

Así es como resolví el problema:

Este método obtiene el elemento individual de la API:

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

Llamo a este método desde componentDidMount, este método se llamará solo una vez, cuando cargue esta ruta por primera vez:

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

Y desde componentWillReceiveProps que se llamará desde la segunda vez que cargamos la misma ruta pero diferente ID, y llamo al primer método para recargar el estado y luego el componente cargará el nuevo elemento.

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

Si está usando Class Component, puede usar 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
      }
    }
 }

Puede utilizar el método proporcionado:

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

cuando se garantiza que el componente volverá a renderizarse después del cambio de ruta, puede pasar los accesorios como dependencia

No es la mejor manera, pero es lo suficientemente buena para manejar lo que está buscando según Kent C. Dodds : Considere más lo que desea que haya sucedido.

react-router está roto porque debe volver a montar componentes en cualquier cambio de ubicación.

Sin embargo, logré encontrar una solución para este error:

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

En resumen (consulte el enlace de arriba para obtener información completa)

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

Esto hará que se vuelva a montar en cualquier cambio de URL.