路由参数更改时组件不会重新挂载

Question

我正在使用 react-router 开发一个反应应用程序。我有一个项目页面，其 url 如下：

myapplication.com/project/unique-project-id

加载项目组件时，我从 componentDidMount 事件触发对该项目的数据请求。我现在遇到了一个问题，如果我直接在两个项目之间切换，那么只有 id 会像这样改变......

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

componentDidMount 不会再次触发，因此不会刷新数据。是否应该使用另一个生命周期事件来触发我的数据请求或解决此问题的不同策略？

Answer 1

如果您确实需要在路由更改时重新挂载组件，您可以将唯一键传递给组件的键属性（键与您的路径/路由相关联）。所以每次路由改变时，key也会改变，触发React组件卸载/重新安装。我的想法来自this answer

Answer 2

这是我的答案，与上面的一些类似，但带有代码。

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

Answer 3

如果链接指向相同的路线，但参数不同，它不会重新安装，而是接收新的道具。因此，您可以使用componentWillReceiveProps(newProps) 函数并查找newProps.params.projectId。

如果您尝试加载数据，我建议在路由器使用组件上的静态方法处理匹配之前获取数据。看看这个例子。 React Router Mega Demo。这样，组件会在路由参数发生变化时加载数据并自动更新，而无需依赖componentWillReceiveProps。

Answer 4

你要清楚，路由改变不会导致页面刷新，你要自己处理。

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

Answer 5

如果你有：

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

在 React 16.8 及更高版本中，using hooks，你可以这样做：

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

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

在那里，您只会在props.match.params.id 更改时触发新的fetchResource 调用。

Answer 6

根据@wei、@Breakpoint25 和@PaulusLimma 的回答，我为<Route> 制作了这个替换组件。这将在 URL 更改时重新安装页面，强制重新创建和安装页面中的所有组件，而不仅仅是重新渲染。所有componentDidMount() 和所有其他启动挂钩也会在 URL 更改时执行。

这个想法是在 URL 更改时更改组件的 key 属性，这会迫使 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 测试过。

Answer 7

@wei's answer 效果很好，但在某些情况下，我发现最好不要设置内部组件的键，而是路由本身。此外，如果组件的路径是静态的，但您只想在每次用户导航到它时重新安装组件（可能在 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)

Answer 8

这就是我解决问题的方法：

此方法从 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 );
    }
  }

Answer 9

您可以使用提供的方法：

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

当组件保证在路由更改后重新渲染时，您可以通过 props 作为依赖项

不是最好的方法，但足以处理您正在寻找的东西 根据 Kent C Dodds： 多考虑一下你希望发生的事情。

Answer 10

如果你使用的是类组件，你可以使用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
      }
    }
 }

Answer 11

这是一个非常简单的解决方案：在 componentDidUpdate 中进行位置检查，并有一个 getData 函数，该函数具有带有 setState 的数据获取部分：

componentDidUpdate (prevProps) {
    if (prevProps.location.key !== this.props.location.key) {
        this.getData();
    }
}


getData = () => {
    CallSomeAsyncronousServiceToFetchData
        .then(
            response => {
                this.setState({whatever: response.data})
            }
        )
}

Answer 12

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 更改时重新挂载