Reactjs 如何在预加载服务器端渲染时访问动态路由参数

我正在尝试呈现一个动态路由，其中预加载了通过异步

thunk

获取的数据

我的组件中有一个需要预加载的静态

initialAction

方法，让它们根据需要调用操作。完成所有操作并解决承诺后，我将呈现路线/页面

我的问题是：如何在静态函数中引用路由参数和/或道具

以下是调用预加载数据可能需要的任何

初始化操作

函数的相关代码

const promises = routes.reduce((promise, route) => {
    if (matchPath(req.url, route) && route.component && route.component.initialAction) {
        promise.push(Promise.resolve(store.dispatch(route.component.initialAction(store))))
    }
    return promise;
}, []);

Promise.all(promises)
.then(() => {
    // Do stuff, render, etc
})

在我的组件中，我有一个静态的

initialAction

函数，该函数将在存储中（从服务器）和道具（从客户端）执行。无论如何，应该通过redux/thunk获取类别。如您所见，在通过服务器加载时，我没有传递动态

permalink

prop，因为我无法检索它

class Category extends Component {

    static initialAction(store, props) {
        let res = store !== null ? getCategory(REACT_APP_SITE_KEY) : props.getCategory(REACT_APP_SITE_KEY, props.match.params.permalink)
        return res
    }

    componentDidMount(){
        if(isEmpty(this.props.category.categories)){
            Category.initialAction(null, this.props)
        }
    }

    /* ... render, etc */
}

最后，这里是我使用的路线：

import Home from '../components/home/Home'
import Category from '../components/Category'
import Product from '../components/product/Product'
import NotFound from '../components/NotFound'

export default [
    {
        path: "/",
        exact: true,
        component: Home
    },
    {
        path: "/category/:permalink",
        component: Category
    },
    {
        path: "/:category/product/:permalink",
        component: Product
    },
    {
        component: NotFound
    }
]

---

我甚至不能完全肯定我是以“标准”的方式来做这件事的，但到目前为止，在非动态路线上，这个过程是有效的。然而，我有一种感觉，我已经离开了基地：）

在服务器上，你有请求对象，在客户端，你有位置对象。检查当前环境后，从这些对象提取url参数

const promises = routes.reduce((promise, route) => {
    var props = matchPath(req.url, route);
    if ( obj && route.component && route.component.initialAction) {
        promise.push(Promise.resolve(store.dispatch(route.component.initialAction(store, props))))
    }
    return promise;
}, []);

---

现在，您将在桌面和服务器上的initialAction中获得url。您可以从这个

中提取动态路由参数，在您有请求对象的服务器上，在客户机上，您有位置对象。检查当前环境后，从这些对象提取url参数

const promises = routes.reduce((promise, route) => {
    var props = matchPath(req.url, route);
    if ( obj && route.component && route.component.initialAction) {
        promise.push(Promise.resolve(store.dispatch(route.component.initialAction(store, props))))
    }
    return promise;
}, []);

---

现在，您将在桌面和服务器上的initialAction中获得url。您可以从中提取动态路由参数

我尝试了这一点，它确实可以像您所描述的那样工作。但是，当我尝试在initialAction中控制台.log（）新的url参数时，我仍然无法访问这些参数。我用我的路线更新了我的问题。从我匹配的路线判断，我应该有一个可用的

category

参数。知道我为什么不知道吗？当你在initialAction中执行console.log（道具）时会打印什么？它应该打印url。如果有，您可以从那里提取参数。从服务器，我传入

req.url

。在initialAction内部，它逐字打印url:

/category/hats

。我觉得我错过了一些非常明显的东西。一个方便的东西！！！我没有意识到matchPath返回了有用的信息。谢谢你的帮助：）我试过了，它真的能像你描述的那样工作。但是，当我尝试在initialAction中控制台.log（）新的url参数时，我仍然无法访问这些参数。我用我的路线更新了我的问题。从我匹配的路线判断，我应该有一个可用的

category

参数。知道我为什么不知道吗？当你在initialAction中执行console.log（道具）时会打印什么？它应该打印url。如果有，您可以从那里提取参数。从服务器，我传入

req.url

。在initialAction内部，它逐字打印url:

/category/hats

。我觉得我错过了一些非常明显的东西。一个方便的东西！！！我没有意识到matchPath返回了有用的信息。感谢您的帮助：）