Komponen tidak dipasang kembali saat parameter rute berubah

Saya sedang mengerjakan aplikasi react menggunakan react-router. Saya memiliki halaman proyek yang memiliki url sebagai berikut:

myapplication.com/project/unique-project-id

Ketika komponen proyek dimuat, saya memicu permintaan data untuk proyek itu dari acara componentDidMount. Saya sekarang mengalami masalah di mana jika saya beralih langsung di antara dua proyek jadi hanya id yang berubah seperti ini ...

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

componentDidMount tidak dipicu lagi sehingga data tidak di-refresh. Apakah ada peristiwa siklus hidup lain yang harus saya gunakan untuk memicu permintaan data saya atau strategi lain untuk mengatasi masalah ini?

Jika tautan mengarah ke rute yang sama hanya dengan parameter yang berbeda, itu tidak memasang ulang, melainkan menerima properti baru. Jadi, Anda bisa menggunakan componentWillReceiveProps(newProps)fungsi tersebut dan mencari newProps.params.projectId.

Jika Anda mencoba memuat data, saya sarankan untuk mengambil data sebelum router menangani pertandingan menggunakan metode statis pada komponen. Lihat contoh ini. React Router Mega Demo . Dengan cara itu, komponen akan memuat data dan secara otomatis memperbarui ketika parameter rute berubah tanpa perlu bergantung componentWillReceiveProps.

Jika Anda memang membutuhkan komponen yang dipasang kembali saat rute berubah, Anda bisa meneruskan kunci unik ke atribut kunci komponen Anda (kunci tersebut terkait dengan jalur / rute Anda). Jadi setiap kali route berubah, kuncinya juga akan berubah yang memicu komponen React untuk unmount / remount. Saya mendapat ide dari jawaban ini

Inilah jawaban saya, mirip dengan beberapa di atas tetapi dengan kode.

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

Anda harus jelas, bahwa perubahan rute tidak akan menyebabkan halaman disegarkan, Anda harus menanganinya sendiri.

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

Jika Anda memiliki:

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

Di React 16.8 dan yang lebih baru, menggunakan hook , Anda dapat melakukan:

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

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

Di sana, Anda hanya memicu fetchResourcepanggilan baru setiap kali ada props.match.params.idperubahan.

Berdasarkan jawaban @wei, @ Breakpoint25 dan @PaulusLimma, saya membuat komponen pengganti ini untuk <Route>. Ini akan memasang ulang halaman saat URL berubah, memaksa semua komponen di halaman untuk dibuat dan dipasang lagi, tidak hanya dirender ulang. Semua componentDidMount()dan semua pengait startup lainnya juga dijalankan pada perubahan URL.

Idenya adalah untuk mengubah keyproperti komponen ketika URL berubah dan ini memaksa React untuk memasang kembali komponen tersebut.

Anda dapat menggunakannya sebagai pengganti drop-in <Route>, misalnya seperti ini:

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

The <RemountingRoute>komponen didefinisikan seperti ini:

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
}

Ini telah diuji dengan React-Router 4.3.

Jawaban @ wei berfungsi dengan baik, tetapi dalam beberapa situasi saya merasa lebih baik untuk tidak menetapkan kunci komponen dalam, tetapi merutekan itu sendiri. Selain itu, jika jalur ke komponen statis, tetapi Anda hanya ingin komponen dipasang ulang setiap kali pengguna menavigasi ke sana (mungkin untuk membuat panggilan api di componentDidMount ()), sebaiknya setel location.pathname ke kunci rute. Dengan itu rute dan semua isinya akan dipasang kembali ketika lokasi berubah.

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)

Beginilah cara saya memecahkan masalah:

Metode ini mendapatkan item individu dari API:

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

Saya memanggil metode ini dari componentDidMount, metode ini hanya akan dipanggil sekali, ketika saya memuat rute ini untuk pertama kalinya:

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

Dan dari componentWillReceiveProps yang akan dipanggil sejak kedua kalinya kita memuat rute yang sama tetapi ID berbeda, dan saya memanggil metode pertama untuk memuat ulang status dan kemudian komponen akan memuat item baru.

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

Jika Anda menggunakan Komponen Kelas, Anda dapat menggunakan 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
      }
    }
 }

Anda dapat menggunakan metode yang disediakan:

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

Jika komponen dijamin akan dirender ulang setelah perubahan rute, Anda dapat meneruskan props sebagai dependensi

Bukan cara terbaik tapi cukup baik untuk menangani apa yang Anda cari menurut Kent C Dodds : Pertimbangkan lebih banyak apa yang Anda inginkan terjadi.

react-router rusak karena harus memasang kembali komponen pada setiap perubahan lokasi.

Saya berhasil menemukan perbaikan untuk bug ini:

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

Singkatnya (lihat tautan di atas untuk info lengkap)

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

Ini akan membuatnya dipasang kembali pada setiap perubahan URL