我正在使用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不会再次触发，因此数据不会刷新。是否有其他生命周期事件可用于触发数据请求，或者有不同的策略可以解决这个问题？
这是我的答案，类似于上面的一些答案但包含代码。
<Route path="/page/:pageid" render={(props) => (
<Page key={props.match.params.pageid} {...props} />)
} />
:pageid参数时才更新组件。 - Cássio Lacerda如果链接只是指向相同路由但参数不同，那么组件不会被重新加载，而是接收到新的props。因此，您可以使用componentWillReceiveProps(newProps)函数并查找newProps.params.projectId。
如果你尝试加载数据，我建议在路由处理匹配之前使用组件上的静态方法来获取数据。可以查看这个例子：React Router Mega Demo。这样，组件将加载数据，并在路由参数更改时自动更新，而无需依赖于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;
在这里，只有当props.match.params.id发生改变时才会触发一个新的fetchResource调用。
componentWillReceiveProps，因此这是更好的答案。 - pjb<Route>。当URL更改时，它将重新装载页面，强制所有页面中的组件都被创建和装载，而不仅仅是重新渲染。所有componentDidMount()和其他启动钩子也在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中进行了测试。
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)
key 直接添加到 <Route /> 更简单，也适用于使用 Typescript 的 React，无需额外的代码（因为其他类似的修复需要在类型上进行一些额外的工作）。 - Raghav ManikandanloadConstruction( 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 )
}
当我们第二次加载相同路由但不同ID时，将会调用componentWillReceiveProps方法。我会先调用第一个方法来重新加载状态，然后组件将加载新的项目。
componentWillReceiveProps(nextProps) {
if (nextProps.match.params.id !== this.props.match.params.id) {
const id = nextProps.match.params.id
this.loadConstruction( id );
}
}
React Router v6+
您需要指定一个键。在React Router早期的版本中，您可以执行以下操作：
<Route path="/project/:pid"
render={(props) => (
<Page key={props.match.params.pid} {...props} />)}
/>
从 React Router v6 开始，<Route> 不再支持使用 render，解决方案之一是创建一个辅助性组件：
const PageProxy = (props) =>
{
const { pid } = useParams();
return <Page key={pid} {...props} />;
}
你的<Route>变得非常简单：
<Route path="/project/:pid" element={<PageProxy />} />
您可以使用提供的方法：
useEffect(() => {
// fetch something
}, [props.match.params.id])
当组件保证在路由更改后重新渲染时，您可以将props作为依赖项传递。
这不是最好的方法，但根据Kent C Dodds的说法，已经足够好处理您想要的内容：更多考虑您想要发生的事情。