サーバ側のレンダリングをプリロードする際の動的ルートパラメータへのアクセス方法

Question

非同期でデータを取得して事前ロードした動的ルートをレンダリングしようとしていますthunk。

私は、プリロードが必要なコンポーネントにstatic 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機能を持っている、と（クライアントから）小道具。どちらか一方の方法で、カテゴリーは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 
    } 
] 

私も「標準」方法でこれをやっているが、このプロセスは、これまでときに働く完全にわかりません非動的ルート。しかし、私は基本から離れて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を取得します。あなたはこれから動的経路パラメータを抽出することができます