경로 매개 변수가 변경 될 때 구성 요소가 다시 마운트되지 않음

react-router를 사용하여 반응 응용 프로그램을 작업 중입니다. 다음과 같은 URL이있는 프로젝트 페이지가 있습니다.

myapplication.com/project/unique-project-id

프로젝트 구성 요소가로드되면 componentDidMount 이벤트에서 해당 프로젝트에 대한 데이터 요청을 트리거합니다. 이제 두 프로젝트간에 직접 전환하면 ID 만 이와 같이 변경되는 문제가 발생합니다.

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

componentDidMount가 다시 트리거되지 않으므로 데이터가 새로 고쳐지지 않습니다. 데이터 요청을 트리거하는 데 사용해야하는 다른 수명주기 이벤트 나이 문제를 해결하기위한 다른 전략이 있습니까?

링크가 다른 매개 변수 만 사용하여 동일한 경로로 향하는 경우 다시 마운트되지 않고 대신 새 소품을받습니다. 따라서 componentWillReceiveProps(newProps)함수를 사용하고 newProps.params.projectId.

데이터를로드하려는 경우 라우터가 구성 요소의 정적 메서드를 사용하여 일치를 처리하기 전에 데이터를 가져 오는 것이 좋습니다. 이 예를 확인하십시오. React Router Mega Demo . 이렇게하면 구성 요소가 데이터를로드하고 경로 매개 변수가 변경 될 때 자동으로 업데이트됩니다 componentWillReceiveProps.

경로가 변경 될 때 구성 요소를 다시 마운트해야하는 경우 구성 요소의 키 속성에 고유 한 키를 전달할 수 있습니다 (키는 경로 / 경로와 연결됨). 따라서 경로가 변경 될 때마다 React 구성 요소가 마운트 해제 / 재 마운트하도록 트리거하는 키도 변경됩니다. 이 답변 에서 아이디어를 얻었습니다.

위의 일부와 비슷하지만 코드가있는 내 대답은 다음과 같습니다.

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

경로 변경으로 인해 페이지가 새로 고쳐지지는 않는다는 점을 분명히해야하며 직접 처리해야합니다.

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

당신이 가지고 있다면:

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

React 16.8 이상에서는 hooks를 사용하여 다음을 수행 할 수 있습니다.

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

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

거기에서는 변경 fetchResource될 때마다 새 호출을 트리거합니다 props.match.params.id.

@wei, @ Breakpoint25 및 @PaulusLimma의 답변을 바탕으로 <Route>. 이렇게하면 URL이 변경 될 때 페이지가 다시 마운트되어 페이지의 모든 구성 요소가 다시 렌더링되는 것이 아니라 생성되고 다시 마운트됩니다. 모든 componentDidMount()다른 시작 후크는 URL 변경시에도 실행됩니다.

아이디어는 keyURL이 변경 될 때 컴포넌트 속성을 변경하는 것이며 이로 인해 React가 컴포넌트를 다시 마운트하게됩니다.

<Route>예를 들어 다음과 같이에 대한 드롭 인 대체물로 사용할 수 있습니다 .

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

<RemountingRoute>구성 요소는 다음과 같이 정의된다 :

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
}

이것은 React-Router 4.3으로 테스트되었습니다.

@wei의 대답 은 훌륭하게 작동하지만 어떤 상황에서는 내부 구성 요소의 키를 설정하지 않고 자체 경로를 지정하는 것이 더 낫습니다. 또한 구성 요소에 대한 경로가 정적이지만 사용자가 탐색 할 때마다 구성 요소를 다시 마운트하기를 원하면 (아마도 componentDidMount ()에서 API 호출을 수행하는 경우) location.pathname을 경로의 키로 설정하는 것이 편리합니다. 그것의 경로와 위치가 변경되면 모든 콘텐츠가 다시 마운트됩니다.

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)

이것이 내가 문제를 해결 한 방법입니다.

이 메서드는 API에서 개별 항목을 가져옵니다.

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

componentDidMount에서이 메서드를 호출하면이 경로를 처음로드 할 때이 메서드가 한 번만 호출됩니다.

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

두 번째부터 호출되는 componentWillReceiveProps에서 동일한 경로이지만 다른 ID를로드하고 첫 번째 메서드를 호출하여 상태를 다시로드하면 구성 요소가 새 항목을로드합니다.

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

Class Component를 사용하는 경우 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
      }
    }
 }

제공된 방법을 사용할 수 있습니다.

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

경로 변경 후 구성 요소가 다시 렌더링되도록 보장되면 소품을 종속성으로 전달할 수 있습니다.

Kent C Dodds 에 따르면 최선의 방법은 아니지만 원하는 것을 처리하기에 충분합니다 .

react-router 위치 변경시 구성 요소를 다시 장착해야하기 때문에 손상되었습니다.

그래도이 버그에 대한 수정 사항을 찾았습니다.

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

간단히 말해서 (전체 정보는 위의 링크 참조)

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

이렇게하면 URL 변경시 다시 마운트됩니다.