React router v4

Question

我使用带有react-router模块的ReactJS构建同构应用程序，以便在服务器端进行路由。

从guide关于在服务器上使用react-router：

(req, res) => {      
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    //...

    else if (renderProps) {
      res.status(200).send(renderToString(<RoutingContext {...renderProps} />))
    } 

    //...
  })
}

几乎没有关于此RoutingContext的信息。所以我对它的运作方式有点不清楚。它是来自react-router（在其他路由之上使用）的Router组件的某种替代吗？

非常感谢任何理解方面的帮助！

Answer 1

React router v4

在新版本（v4）中，它已更新为createServerRenderContext。这种方式的工作方式与以前完全不同，但更简洁，因为它也不需要使用匹配＆＃39;。

此代码示例将作为快速中间件应用：

import React from 'react';
import { renderToString } from 'react-dom/server';
import { ServerRouter/* , createServerRenderContext */ } from 'react-router';
// todo : remove line when this PR is live
// https://github.com/ReactTraining/react-router/pull/3820
import createServerRenderContext from 'react-router/createServerRenderContext';
import { makeRoutes } from '../../app/routes';

const createMarkup = (req, context) => renderToString(
  <ServerRouter location={req.url} context={context} >
    {makeRoutes()}
  </ServerRouter>
);

const setRouterContext = (req, res, next) => {
  const context = createServerRenderContext();
  const markup = createMarkup(req, context);
  const result = context.getResult();
  if (result.redirect) {
    res.redirect(301, result.redirect.pathname + result.redirect.search);
  } else {
    res.status(result.missed ? 404 : 200);
    res.routerContext = (result.missed) ? createMarkup(req, context) : markup;
    next();
  }
};

export default setRouterContext;

react-lego是一个示例应用，展示了如何使用createServerRenderContext

进行通用渲染

Answer 2

<admin> <routers> <adminhtml> <args> <modules> <Mynamespace_CustomerGroupReturnable before="Mage_Adminhtml">Mynamespace_CustomerGroupReturnable_Adminhtml</Mynamespace_CustomerGroupReturnable> </modules> </args> </adminhtml> </routers> </admin>是一个未记录的功能，将在v2.0.0中替换为RoutingContext。它的作用是同步渲染路径组件。

它只是组件的一个包装器，它会注入上下文属性，例如RouterContext，history和location。

Answer 3

React router v4

在新版本（v4）中，它已被删除为createServerRenderContext。这种方式与以前完全不同，但更简洁。

这个小代码示例将被应用。

import { StaticRouter } from'react-router-dom'

const context = {}

const mockup = renderToString(
  <Provider store = {store}>
     <IntlProvider locale = {locale} messages = {messages[locale]}>
      <StaticRouter location={request.url} context={context}>
        <ModuleReactWithPages />
      </StaticRouter>
     </IntlProvider>
    </Provider>
)

现在，当它是404

时，它就是一层

ReactJS react-router RoutingContext

3 个答案:

React router v4