Question

我正在尝试渲染预先加载了通过异步thunk获取的数据的动态路由。

我的组件中有一个需要预加载的静态initialAction方法，让他们根据需要调用这些操作。完成所有操作并解决承诺后，我会渲染路径/页面。

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

以下是调用预加载数据可能需要的任何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函数，它将在商店（来自服务器）和props（来自客户端）中获取。无论如何，应该通过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
    }
]

我并不完全确定我是否会在＆＃34;标准中做到这一点＆＃34;但是，这个过程在非动态路线上可行。但是，我有一种感觉，我已经离开了基地:)。

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。你可以从这个

中提取动态路线参数

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

1 个答案: