我在使用ReactJS和react-router模塊構建同構應用程序，以便在服務器端進行路由。ReactJS react-router RoutingContext

從它guide有關使用服務器上的反應路由器：

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

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

    //... 
    }) 
}

有關於這RoutingContext幾乎沒有任何信息。所以對我來說它的工作原理有點不清楚。是來自react-router（在其他路線上使用）的Router組件的某種替代品嗎？

任何幫助理解將非常感激！

來源

2016-01-13 Oleg Meleshko

RoutingContext是一個未公開的功能，將被v2.0.0中的RouterContext取代。它的作用是同步呈現路由組件。

它只是一個圍繞組件的包裝，它注入了上下文屬性，如history，location和params。

來源

2016-01-13 13:36:10 Florent

我把它從這裏https://github.com/rackt/react-router/blob/latest/docs/guides/advanced/ServerRendering .MD。現在開始使用2.0.0-rc4還是繼續使用1.0.3是否有意義？ –

你一定要等到2.0.0 – Florent

陣營路由器V4

它已經更新到createServerRenderContext新版本（V4）。它的工作方式與以前截然不同，但更加簡潔，因爲它也擺脫了使用「匹配」的需要。

此代碼示例應用成快遞中間件：

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

來源

2016-09-15 08:16:46

看來createServerRenderContext實際上已經被刪除了，而你現在只傳遞一個普通的對象。 https://github.com/ReactTraining/react-router/issues/4471 – twiz

陣營路由器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

來源

2017-02-27 15:02:49

ReactJS react-router RoutingContext

回答

陣營路由器V4

相關問題