React/Reduxを使用したサーバー側のレンダリングでurlパラメータをloadDataに渡す

これはうまくいかない理由はかなり肯定的ですが、修正方法がわかりません。React/Reduxを使用したサーバー側のレンダリングでurlパラメータをloadDataに渡す

SSRとなるようにデータをストアに渡すために、最後にloadData()関数を使用するコンポーネントがあります。

例の構成要素は、ここでの問題はthis.props.match.params.idは特に小道具の一部で、未定義であるということである

class Test extends Component { 
    render(){ 
    return (
     <div>Test</div> 
    ) 
    } 
} 

const loadData = store => { 
    return store.dispatch(actions.getRecord(this.props.match.params.id)); 
}; 

export default { 
    component: Test, 
    loadData: loadData 
}

ようなものになるだろう。私はこれがコンポーネントの内部にないので、この内部のURLからparamsにどのようにアクセスすればよいのでしょうか？

matchRoutes(routes, req.path) 
    .map(({ route, match }) => { 
     return route.loadData ? route.loadData(store, match) : Promise.resolve(null); 
    })

：

import React from 'react'; 
import { renderToString } from 'react-dom/server'; 
import { StaticRouter } from 'react-router-dom'; 
import { Provider } from 'react-redux'; 
import { renderRoutes } from 'react-router-config'; 
import serialize from 'serialize-javascript'; 
import { Helmet } from 'react-helmet'; 
import { matchRoutes } from 'react-router-config'; 

import routes from './src/routes'; 
import createStore from './src/stores'; 

function handleRender(req, res) { 
    const store = createStore.configure(null); // create Store in order to get data from redux 

    const promises = matchRoutes(routes, req.path) 
    .map(({ route }) => { 
     // Matches the route and loads data if loadData function is there 
     return route.loadData ? route.loadData(store) : null; 
    }) 
    .map(promise => { 
     if (promise) { 
     return new Promise((resolve, reject) => { 
      promise.then(resolve).catch(resolve); // lets all data load even if route fails 
     }); 
     } 
    }); 

    Promise.all(promises).then(() => { 
    const context = {}; 
    if (context.url) { 
     return res.redirect(301, context.url); // redirect for non auth users 
    } 

    if (context.notFound) { 
     res.status(404); // set status to 404 for unknown route 
    } 

    const content = renderToString(
     <Provider store={store}> 
     <StaticRouter location={req.path} context={context}> 
      <div>{renderRoutes(routes)}</div> 
     </StaticRouter> 
     </Provider> 
    ); 

    const initialState = serialize(store.getState()); 

    const helmet = Helmet.renderStatic(); 

    res.render('index', { content, initialState, helmet }); 
    }); 
} 

module.exports = handleRender;

出典

2017-11-13 Taylor Austin