Thành phần không kết nối lại khi các thông số tuyến đường thay đổi

Tôi đang làm việc trên một ứng dụng phản ứng sử dụng bộ định tuyến phản ứng. Tôi có một trang dự án có url như sau:

myapplication.com/project/unique-project-id

Khi thành phần dự án tải, tôi kích hoạt yêu cầu dữ liệu cho dự án đó từ sự kiện componentDidMount. Bây giờ tôi đang gặp phải một vấn đề trong đó nếu tôi chuyển đổi trực tiếp giữa hai dự án thì chỉ id thay đổi như thế này ...

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

componentDidMount không được kích hoạt lại nên dữ liệu không được làm mới. Có sự kiện vòng đời nào khác mà tôi nên sử dụng để kích hoạt yêu cầu dữ liệu của mình hoặc một chiến lược khác để giải quyết vấn đề này không?

Nếu liên kết đang hướng đến cùng một tuyến đường chỉ với một thông số khác, nó sẽ không kết nối lại mà thay vào đó nhận các đạo cụ mới. Vì vậy, bạn có thể sử dụng componentWillReceiveProps(newProps)chức năng và tìm kiếm newProps.params.projectId.

Nếu bạn đang cố gắng tải dữ liệu, tôi khuyên bạn nên tìm nạp dữ liệu trước khi bộ định tuyến xử lý trận đấu bằng cách sử dụng các phương thức tĩnh trên thành phần. Kiểm tra ví dụ này. React Router Mega Demo . Bằng cách đó, thành phần sẽ tải dữ liệu và tự động cập nhật khi các thông số tuyến đường thay đổi mà không cần dựa vào componentWillReceiveProps.

Nếu bạn thực sự cần số lượng lại thành phần khi tuyến đường thay đổi, bạn có thể chuyển một khóa duy nhất cho thuộc tính khóa của thành phần (khóa được liên kết với đường dẫn / tuyến đường của bạn). Vì vậy, mỗi khi tuyến đường thay đổi, khóa cũng sẽ thay đổi kích hoạt thành phần React để ngắt kết nối / kết nối lại. Tôi có ý tưởng từ câu trả lời này

Đây là câu trả lời của tôi, tương tự như một số câu trên nhưng có mã.

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

Bạn phải rõ ràng rằng thay đổi lộ trình sẽ không gây ra việc làm mới trang, bạn phải tự xử lý.

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

Nếu bạn có:

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

Trong React 16.8 trở lên, sử dụng hook , bạn có thể làm:

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

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

Trong đó, bạn chỉ kích hoạt một fetchResourcecuộc gọi mới bất cứ khi nào props.match.params.idthay đổi.

Dựa trên câu trả lời của @wei, @ Breakpoint25 và @PaulusLimma, tôi đã tạo thành phần thay thế này cho <Route>. Điều này sẽ đếm lại trang khi URL thay đổi, buộc tất cả các thành phần trong trang phải được tạo và gắn kết lại, chứ không chỉ được hiển thị lại. Tất cả componentDidMount()và tất cả các hook khởi động khác cũng được thực thi trên thay đổi URL.

Ý tưởng là thay đổi thuộc tính thành phần keykhi URL thay đổi và điều này buộc React phải gắn kết lại thành phần.

Bạn có thể sử dụng nó để thay thế <Route>cho ví dụ như sau:

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

Thành <RemountingRoute>phần được định nghĩa như thế này:

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
}

Điều này đã được thử nghiệm với React-Router 4.3.

Câu trả lời của @ wei hoạt động tuyệt vời, nhưng trong một số tình huống, tôi thấy tốt hơn là không đặt khóa của thành phần bên trong mà hãy tự định tuyến. Ngoài ra, nếu đường dẫn đến thành phần là tĩnh, nhưng bạn chỉ muốn thành phần đếm lại mỗi khi người dùng điều hướng đến nó (có lẽ để thực hiện một cuộc gọi api tại componentDidMount ()), bạn nên đặt location.pathname thành khóa của tuyến. Với tuyến đường và tất cả nội dung của nó được ghi lại khi vị trí thay đổi.

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)

Đây là cách tôi giải quyết vấn đề:

Phương thức này nhận từng mục từ API:

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

Tôi gọi phương thức này từ componentDidMount, phương thức này sẽ được gọi chỉ một lần, khi tôi tải tuyến đường này lần đầu tiên:

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

Và từ componentWillReceiveProps sẽ được gọi kể từ lần thứ hai chúng tôi tải cùng một tuyến đường nhưng khác ID, và tôi gọi phương thức đầu tiên để tải lại trạng thái và sau đó thành phần sẽ tải mục mới.

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

Nếu bạn đang sử dụng Class Component, bạn có thể sử dụng 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
      }
    }
 }

Bạn có thể sử dụng phương pháp được cung cấp:

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

khi thành phần được đảm bảo sẽ hiển thị lại sau khi thay đổi tuyến thì bạn có thể chuyển các đạo cụ dưới dạng phụ thuộc

Không phải là cách tốt nhất nhưng đủ tốt để xử lý những gì bạn đang tìm kiếm theo Kent C Dodds : Hãy xem xét thêm những gì bạn muốn đã xảy ra.

react-router bị hỏng vì nó phải gắn lại các thành phần khi thay đổi vị trí.

Mặc dù vậy, tôi đã cố gắng tìm ra bản sửa lỗi cho lỗi này:

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

Tóm lại (xem liên kết ở trên để biết thông tin đầy đủ)

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

Điều này sẽ làm cho nó trở lại với bất kỳ thay đổi URL nào