ReactJS 反应路由器 RoutingContext

Posted 2023-02-21

【中文标题】ReactJS 反应路由器 RoutingContext

【英文标题】：ReactJS react-router RoutingContext

【发布时间】：2016-04-18 12:00:10

【问题描述】：

我正在使用带有 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 组件（用于其他路由之上）？

任何理解帮助将不胜感激！

【参考方案1】：

RoutingContext 是一个未记录的功能，在 v2.0.0 中将被 RouterContext 取代。它的作用是同步渲染路由组件。

它只是你的组件的一个包装器，它注入诸如history、location 和params 之类的上下文属性。

【讨论】：

我从这里github.com/rackt/react-router/blob/latest/docs/guides/advanced/… 拿走了它。开始使用 2.0.0-rc4 还是暂时使用 1.0.3 是否有意义？

你一定要等到 2.0.0

【参考方案2】：

反应路由器 v4

在新版本 (v4) 中已更新为 createServerRenderContext。这与以前的工作方式非常不同，但更简洁，因为它也摆脱了使用“匹配”的需要。

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

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 进行通用渲染

【讨论】：

看来 createServerRenderContext 实际上已经被删除了，你现在只传递一个普通的对象。 github.com/ReactTraining/react-router/issues/4471

【参考方案3】：

反应路由器 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 时，它本身就是一层