Question

在 componentDidMount（）上，我正在运行一项操作，以使用matchPath（）从URL获取react-router参数，并将该数据存储在redux存储中。

然后我使用这些数据基于这些参数（从商店中获取）执行另一个操作。

如果我在网站上使用内部的React-Router <Link>，则此方法很好-但是，如果使用前进和后退按钮，则 componentDidMount（）中的道具不是'将路线数据保存到redux存储区时更新。

使用Router Link标记-（控制台输出）：

getRouterRouteParams action found route data:  {path: "/recipe/:recipeId/:woeType/:woe?", url: "/recipe/10054617/preset/test", isExact: true, params: {…}}

New route data saved to store.

Route data in componentDidMount from mapStateToProps:  {path: "/recipe/:recipeId/:woeType/:woe?", url: "/recipe/10054617/preset/test", isExact: true, params: {…}}

使用浏览器按钮-单击“返回”，然后单击“前进”-（控制台输出）：

getRouterRouteParams action found route data:  {path: "/recipe/:recipeId/:woeType/:woe?", url: "/recipe/10054617/preset/test", isExact: true, params: {…}}

New route data saved to store.

Route data in componentDidMount from mapStateToProps:  {path: "/recipe-feed/:f", url: "/recipe-feed/test", isExact: true, params: {…}}

如您所见，尽管我的操作的日志输出显示它存储了当前路径的数据，但是mapStateToProps的componentDidMount中的路由数据仍然具有来自先前路径而非当前路径的数据。

ComponentDidMount

componentDidMount() {
    const { routeData, location, getRouterRouteParamsAction } = this.props;

    // Update routeData in redux store before any other actions can take place - since they are dependent on accurate route data
    getRouterRouteParamsAction(location.pathname);
    console.log("Route data in componentDidMount from mapStateToProps: ", routeData);

    ... other actions here
}

动作

因为这是一个服务器端呈现的React应用，routes are stored位于一个集中文件中（以防您不熟悉SSR react-router如何具有一些不同的配置实践）。

import routes from "../../shared/components/App/routes.js";

export const getRouterRouteParams = (path) => {
    return (dispatch) => {
        let matchingRoute = routes.find(route => {
            return matchPath(path, route);
        });

        let routeData = matchPath(path, matchingRoute);
        console.log("getRouterRouteParams action found route data: ", routeData);

        dispatch({
            type: UPDATE_ROUTE_DATA,
            payload: routeData
        })

        console.log("New route data saved to store.");
    }
}

这是一个计时问题吗？尽管console.log输出看似正确，但我的其他componentDidMount（）动作是否在该动作的dispatch（）函数完成之前实际运行？

如果我查看我的redux存储区（使用chrome扩展名），我会发现实际上来自当前url的正确值已存储在redux存储区中……它们只是没有传递给道具。

我可以在某个更早位置粘贴此操作，以便在其他操作继续运行之前确定它已完成存储新路线数据吗？ >

我应该覆盖浏览器的前进和后退按钮的处理方式吗？

Answer 1

好吧...事实证明，我根本不需要做自己的操作/化简就可以完全使用matchPath查找和提取路由参数数据。

使用withRouter时，match被添加到道具中并立即可用。

componentDidMount() {
    const { match } = this.props;

    // Logs details about this route, including params
    console.log("Match Data: ", match);
}

相关文档：

React Props没有带有浏览器前进按钮的最新Redux存储数据

ComponentDidMount

动作

1 个答案: