路由参数更改时，组件不会重新安装

我正在使用react-router开发一个React应用程序。我有一个项目页面，其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。

如果您要加载数据，我建议在路由器使用组件上的静态方法处理匹配之前获取数据。看看这个例子。反应路由器兆演示。这样，该组件将加载数据并在路由参数更改时自动更新，而无需依赖componentWillReceiveProps。

如果在更改路线时确实需要重新安装组件，则可以将唯一键传递给组件的key属性（该键与您的路径/路由相关联）。因此，每次路线更改时，密钥也会更改，从而触发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更改时执行。

这个想法是key在URL更改时更改组件属性，这将迫使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设置为route的键。有了路线，当位置更改时，所有内容都将重新安装。

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，因此我将调用第一个方法重新加载状态，然后component将加载新项目。

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

如果您正在使用类组件，则可以使用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])

当组件保证在更改路线后可以重新渲染时，您可以将prop作为依赖项传递

根据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更改时重新安装