Rota parametreleri değiştiğinde bileşen yeniden bağlanmıyor

React-router kullanan bir react uygulaması üzerinde çalışıyorum. Aşağıdaki gibi bir url'ye sahip bir proje sayfam var:

myapplication.com/project/unique-project-id

Proje bileşeni yüklendiğinde, componentDidMount olayından o proje için bir veri talebini tetiklerim. Şimdi, iki proje arasında doğrudan geçiş yaparsam, böylece yalnızca kimlik böyle değişirse bir sorunla karşılaşıyorum ...

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

componentDidMount tekrar tetiklenmediğinden veriler yenilenmez. Veri talebimi tetiklemek için kullanmam gereken başka bir yaşam döngüsü olayı veya bu sorunu çözmek için farklı bir strateji var mı?

Bağlantı sadece farklı bir parametre ile aynı rotaya yönleniyorsa, bu yeniden bağlanmak yerine yeni sahne alanlarını alır. Yani, kullanabilirsinizcomponentWillReceiveProps(newProps) işlevi ve arayabilirsiniz newProps.params.projectId.

Verileri yüklemeye çalışıyorsanız, yönlendirici eşleşmeyi bileşende statik yöntemler kullanarak işlemeden önce verileri getirmenizi tavsiye ederim. Bu örneğe bakın. React Router Mega Demo . Bu şekilde, bileşen verileri yükler ve güvenmeye gerek kalmadan rota parametreleri değiştiğinde otomatik olarak güncellenir componentWillReceiveProps.

Rota değiştiğinde bir bileşenin yeniden bağlanmasına ihtiyacınız varsa, bileşeninizin anahtar özelliğine benzersiz bir anahtar iletebilirsiniz (anahtar, yolunuzla / rotanızla ilişkilendirilir). Bu nedenle, rota her değiştiğinde, anahtar aynı zamanda React bileşenini ayırmak / yeniden bağlamak için tetikleyen anahtarı da değiştirecektir. Fikri bu cevaptan aldım

İşte cevabım, yukarıdakilerden bazılarına benzer ancak kodlu.

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

Bir rota değişikliğinin sayfanın yenilenmesine neden olmayacağından emin olmalısınız, bunu kendiniz halletmelisiniz.

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

Eğer varsa:

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

React 16.8 ve üzeri sürümlerde, kancaları kullanarak şunları yapabilirsiniz:

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

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

Orada, yalnızca fetchResourceher props.match.params.iddeğiştiğinde yeni bir aramayı tetikliyorsunuz .

@Wei, @ Breakpoint25 ve @PaulusLimma tarafından verilen yanıtlara göre <Route>. Bu, URL değiştiğinde sayfayı yeniden bağlar ve sayfadaki tüm bileşenleri yalnızca yeniden oluşturmayı değil, yeniden oluşturulmaya ve bağlanmaya zorlar. Tüm componentDidMount()diğer başlangıç ​​kancaları da URL değişikliğinde yürütülür.

Buradaki fikir, keyURL değiştiğinde bileşen özelliğini değiştirmektir ve bu, React'i bileşeni yeniden monte etmeye zorlar.

Bunu, <Route>örneğin bunun gibi bir drop-in yerine kullanabilirsiniz :

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

<RemountingRoute>Bileşeni aşağıdaki gibi tanımlanır:

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
}

Bu, React-Router 4.3 ile test edilmiştir.

@ Wei'nin cevabı harika çalışıyor, ancak bazı durumlarda iç bileşenin bir anahtarını belirlemekten ziyade kendisini yönlendirmeyi daha iyi buluyorum. Ayrıca, bileşene giden yol statikse, ancak yalnızca kullanıcının ona her gittiğinde yeniden bağlanmasını istiyorsanız (belki componentDidMount () 'da bir api-çağrısı yapmak için), location.pathname'i yolun anahtarına ayarlamak kullanışlıdır. Onunla rota ve tüm içeriği konum değiştiğinde yeniden monte edilir.

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)

Sorunu şu şekilde çözdüm:

Bu yöntem, bağımsız öğeyi API'den alır:

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

Bu yöntemi componentDidMount'tan çağırıyorum, bu yöntemi ilk kez yüklediğimde bu yöntem yalnızca bir kez çağrılacak:

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

Ve ikinci seferden beri çağrılacak olan componentWillReceiveProps'tan aynı rotayı ancak farklı ID'yi yüklüyoruz ve durumu yeniden yüklemek için ilk yöntemi çağırıyorum ve sonra bileşen yeni öğeyi yükleyecektir.

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

Sınıf Bileşeni kullanıyorsanız, componentDidUpdate'i kullanabilirsiniz.

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

Sağlanan yöntemi kullanabilirsiniz:

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

rota değişikliğinden sonra bileşenin yeniden işlenmesi garanti edildiğinde, bağımlılık olarak props'ı geçebilirsiniz

En iyi yol değil ama Kent C Dodds'a göre aradığınızı halledecek kadar iyi : Ne olmasını istediğinizi daha fazla düşünün.

react-router herhangi bir konum değişikliğinde bileşenleri yeniden monte etmesi gerektiğinden bozuk.

Yine de bu hata için bir düzeltme bulmayı başardım:

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

Kısaca (tüm bilgiler için yukarıdaki bağlantıya bakın)

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

Bu, herhangi bir URL değişikliğinde yeniden bağlanmasını sağlayacaktır