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

Question

我正在尝试呈现一个动态路由，该路由预加载了通过异步 thunk 获取的数据。

我的组件中有一个静态 initialAction 方法需要预加载，并让它们根据需要调用操作。完成所有操作并解决承诺后，我将渲染 route/page.

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

此处是相关代码，将调用预加载数据可能需要的任何 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 道具，因为我无法检索它。

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
    }
]

不完全确定我什至以 "standard" 方式执行此操作，但到目前为止，此过程在非动态路由上有效。但是，我有一种感觉，我离基地 waaaay :)

Answer 1

在服务器上有请求对象，在客户端上有位置对象。检查当前环境后从这些对象中提取 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。你可以从中提取动态路由参数

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

How to access dynamic route parameters when preloading server-side render

server-side

reactjs

redux

redux-thunk