使用 React Router 4 预取数据

Question

我正在尝试迁移到 React Router 的 v4，但我被预取数据困住了。我们过去具有匹配功能的最新版本。

返回的参数之一是 renderProps，但现在我无法使用匹配，所以我不知道如何预取数据。该文档显示了如何加载数据，但对我不起作用，因为我正在使用新版本的 react-router-redux 来同步存储。

下面是客户端的代码：

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

在研究它之后，我找到了一个适合我的解决方案。这是帮助程序(之前是预取数据)。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);

路由是静态路由：

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));

渲染应用程序文件(客户端必须相同而不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);
};

应用路由文件：

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