react-router-dom v5调用history.push更新URL后页面不重新渲染问题求助

你遇到的现象本质是组件复用导致的生命周期触发逻辑不符合预期，和history版本、useHistory调用方式无关：

• 你所有路由最终渲染的都是同一个Page组件，当路径切换仍命中Page的路由规则时，React Router默认会复用已有的Page组件实例，不会销毁后重新挂载，因此空依赖数组的useEffect只会在组件首次挂载时执行一次，后续路径变更不会触发。
• 你在Route的render回调中只给Page传了projectID和homepage两个参数，没有把路由上下文的location、match等属性透传给Page，因此直接拿props.location必然返回undefined。

方案1：透传路由上下文属性（改动最小） #

修改App.js中所有路由的render逻辑，把回调拿到的路由属性全部透传给Page即可：

<Route path="/project/([a-zA-Z0-9]+)/([a-z\-0-9]+)/([a-z\-0-9]+)/" render={urlprops =>
    <Page 
        {...urlprops} 
        projectID={urlprops.match.params[0]} 
        homepage={false} 
    />
} />
<Route path="/project/([a-zA-Z0-9]+)/([a-z\-0-9]+)/" render={urlprops =>
    <Page 
        {...urlprops} 
        projectID={urlprops.match.params[0]} 
        homepage={false} 
    />
} />

之后在Page组件中把props.match.params或者props.location加入useEffect的依赖数组，就能正常监听路由参数变更触发请求。

方案2：用官方钩子直接获取路由参数（推荐写法，也是你目前的实现方向） #

React Router v5 官方推荐用 Hooks 直接拿路由上下文，不需要父组件透传，这是合理的常规写法，不是多余操作：

// Page组件内引入所需hooks
import { useParams, useLocation } from "react-router-dom";

const Page = ({ homepage }) => {
    // 直接拿路由参数，不需要父组件传递
    const params = useParams();
    const projectID = params[0];

    useEffect(() => {
        if (!homepage) {
            apiFetchProject(projectID);
        }
    // 把projectID加入依赖，参数变化自动触发请求
    }, [projectID, homepage]);

    // 其余逻辑不变
}

这种写法不受组件层级限制，比透传props更灵活，是现在React生态的主流写法。

额外兼容处理 #

你提到的版本兼容问题是因为react-router-dom v5本身依赖history v4版本，你单独安装的history v5会和它产生冲突：

• 直接卸载你手动安装的history包即可，BrowserRouter会自带适配的history版本，不需要额外安装。

内容的提问来源于stack exchange，提问作者biscuitstack