我正在使用 react-router 开发一个 react 应用程序。我有一个项目页面，其网址如下：
myapplication.com/project/unique-project-id
当项目组件加载时，我会从 componentDidMount 事件触发该项目的数据请求。我现在遇到了一个问题，如果我直接在两个项目之间切换，那么只有 id 像这样改变......
myapplication.com/project/982378632
myapplication.com/project/782387223
myapplication.com/project/198731289
componentDidMount 不会再次触发，因此不会刷新数据。是否应该使用另一个生命周期事件来触发我的数据请求或解决此问题的不同策略？
如果您确实需要在路由更改时重新安装组件，您可以将唯一键传递给组件的键属性（键与您的路径/路由相关联）。所以每次路由改变时，key 也会改变，触发 React 组件卸载/重新挂载。我从这个答案中得到了想法
这是我的答案，类似于上面的一些但有代码。
<Route path="/page/:pageid" render={(props) => (
<Page key={props.match.params.pageid} {...props} />)
} />
如果链接指向相同的路由，只是使用不同的参数，则不会重新安装，而是接收新的props。因此，您可以使用该componentWillReceiveProps(newProps)函数并查找newProps.params.projectId.
如果您尝试加载数据，我建议您在路由器使用组件上的静态方法处理匹配之前获取数据。看看这个例子。react-router巨型演示。这样，组件将加载数据并在路由参数更改时自动更新，而无需依赖componentWillReceiveProps.
您必须清楚，路由更改不会导致页面刷新，您必须自己处理。
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发生变化时触发新呼叫。