リアクタルータ4でデータをプリフェッチ

Question

リアクタのv4に移行しようとしていますが、プリフェッチデータが残っています。最新のバージョンでは、matchの機能を持っていました。

返されるパラメータの1つがrenderPropsでしたが、今では一致を使用できないため、データのプリフェッチ方法はわかりません。私はreact-router-reduxの新しいバージョンを使って店を同期させているので、データをロードする方法を示すdocumentationが私のために働いていません。

return (
    <MuiThemeProvider muiTheme={letgoMuiTheme}> 
    <Provider store={store}> 
     <IntlProvider> 
     { routes(history, store) } 
     </IntlProvider> 
    </Provider> 
</MuiThemeProvider> 
); 

ルート：

はここで、クライアントのコードです

export default function routes(history) { 
    return (
    <ConnectedRouter history={history}> 
     <Switch> 
     <Route exact path="/" component={App} /> 
     <Route path="/:lang/chat" component={Chat} /> 
     ... 
     <Route path="*" component={NotFound} status={404} /> 
     </Switch> 
    </ConnectedRouter> 
); 
} 

サーバー：

私の古いサーバ・ファイルの

if (context.url) { 
    res.redirect(302, redirectLocation.pathname + redirectLocation.search); 
} else { 
    const render =() => { 
    const body = renderToString(
     <StaticRouter 
     location={req.url} 
     context={context} 
     > 
     <MuiThemeProvider muiTheme={muiTheme}> 
      <Provider store={store}> 
      <IntlProvider> 
       { routes(history, store) } 
      </IntlProvider> 
      </Provider> 
     </MuiThemeProvider>, 
     </StaticRouter> 
    ); 

    res.setHeader('content-language', locale); 
    res.render('index', { 
     head, 
     body, 
     locale, 
     state: stringState, 
     ... 
    }); 
    }; 

    Promise.all(
    prefetchData(renderProps, store), 
) 
    .then(render) 
    .catch(prefetchError => next(prefetchError)); 
} 

：

match({ history, routes, location: req.url }, (error, redirectLocation, renderProps) => { 
     if (error) { 
     throw error; 
     } else if (redirectLocation) { 
     res.redirect(302, redirectLocation.pathname + redirectLocation.search); 
     } else if (renderProps) { 
     // Render react components once store is initializaed and return HTTP response 
     const render =() => { 
      const body = renderToString(
      <MuiThemeProvider muiTheme={muiTheme}> 
       <Provider store={store}> 
       <IntlProvider> 
        <RouterContext {...renderProps} /> 
       </IntlProvider> 
       </Provider> 
      </MuiThemeProvider>, 
     ); 

      res.setHeader('content-language', locale); 
      res.render('index', { 
      head, 
      newrelicScript, 
      body, 
      locale, 
      state: stringState, 
      ... 
      }); 
     }; 

     // Fetch components data and render HTML (no matter the fetch results 
     // we need to render something) 
     Promise.all(
      prefetchData(renderProps, store), 
     ) 
     .then(render) 
     .catch(prefetchError => next(prefetchError)); 
     } else { 
     logger.warning('Ops !!! We should never arrive here :('); 
     next(); 
     } 
    }); 

の

そして、プリフェッチデータ：

export const prefetchData = (renderProps, store) => { 
    const { components, params } = renderProps; 
    const { dispatch } = store; 
    const state = store.getState(); 
    const extractWrappedComponent = (component) => { 
    if (component.WrappedComponent) { 
     return extractWrappedComponent(component.WrappedComponent); 
    } 
    return component; 
    }; 

    return components 
    .filter(component => component !== undefined) 
    // Get component, be aware if they are wrapped by redux connect or intl. 
    .map(component => extractWrappedComponent(component)) 
    // Get the fetchData method of each component 
    .map(component => component.fetchData) 
    .filter(fetchData => fetchData !== undefined) 
    // Invoke each fetchData to initialize the redux state. 
    .map(fetchData => fetchData(state, dispatch, params)); 
}; 

Answer 1

それに見た後、私は私の作品解決策を見つけました。これはヘルパーです（以前はprefetchDataでした）。 matchPathは、react-router-domからである。

export const getRouteData = (routesArray, url, store) => { 
    const { dispatch } = store; 
    const state = store.getState(); 
    const extractWrappedComponent = (component) => { 
    if (component.WrappedComponent) { 
     return extractWrappedComponent(component.WrappedComponent); 
    } 
    return component; 
    }; 

    return routesArray.map((route) => { 
    const component = route.component; 
    const extractedComponent = extractWrappedComponent(component); 
    const match = matchPath(url, { path: route.path, exact: route.exact, strict: false }); 

    if (match) { 
     if (extractedComponent.fetchData !== undefined) { 
     extractedComponent.fetchData(state, dispatch, match.params); 
     } 
    } 
    }); 
} 

その後、私はそれを呼び出す：

getRouteData(routes, req.url, store); 

はルートだったのはstatic routesです：

export const routes = [ 
    { 
    path: '/', 
    component: App 
    }, 
    { 
    path: '/:lang/chat', 
    component: Chat 
    } 
    ... 

私のサーバファイルは、現在のマッチを持っていません。代わりに：

if (context.url) { 
    res.redirect(302, context.url); 
} else { 
    const render =() => { 
    const body = renderApp(req, muiTheme, store, history, context); 

    res.render('index', { 
     head, 
     body, 
     locale, 
     ... 
    }); 
    }; 

    Promise.all(
    getRouteData(routes, req.url, store), 
) 
    .then(render) 
    .catch(prefetchError => next(prefetchError)); 

RenderAppファイル（クライアントがStaticRouterなく、同じである必要があります）：

const renderApp = (req, muiTheme, store, history, context) => { 
    const app = (
    <MuiThemeProvider muiTheme={muiTheme}> 
     <Provider store={store}> 
     <IntlProvider> 
      <StaticRouter 
      location={req.url} 
      context={context} 
      > 
      { appRoutes(history) } 
      </StaticRouter> 
     </IntlProvider> 
     </Provider> 
    </MuiThemeProvider> 
); 

    return renderToString(app); 
}; 

appRoutesファイル：

export default function appRoutes(history) { 
    return (
    <ConnectedRouter history={history}> 
     <div> 
     {routes.map((route, key) => (
      <Route key={key} {...route} /> 
     ))} 
     </div> 
    </ConnectedRouter> 
); 
}