ReactJS phản ứng-router Định tuyếnContext

Question

Tôi đang xây dựng ứng dụng đẳng cấu bằng ReactJS với mô-đun react-router để định tuyến trên máy chủ.

Từ guide của nó về việc sử dụng phản ứng-router trên máy chủ:

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

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

    //... 
    }) 
} 

Hầu như không có thông tin về RoutingContext này. Vì vậy, nó là một chút không rõ ràng cho tôi như thế nào nó hoạt động. Có một số loại thay thế cho thành phần Router từ bộ phản ứng-bộ định tuyến (được sử dụng trên các tuyến đường khác) không?

Bất kỳ trợ giúp nào trong hiểu biết sẽ thực sự được đánh giá cao!

Answer 1

RoutingContext là tính năng không có giấy tờ và sẽ được thay thế bằng RouterContext trong v2.0.0. Vai trò của nó là đồng bộ hiển thị thành phần tuyến đường.

Nó chỉ đơn giản là một trình bao bọc xung quanh thành phần của bạn, sẽ chèn các thuộc tính ngữ cảnh như history, location và params.

Answer 2

Phản ứng Router v4

trong phiên bản mới (v4) nó đã được cập nhật createServerRenderContext. Điều này hoạt động theo cách rất khác so với trước đây nhưng ngắn gọn hơn nhiều vì nó cũng loại bỏ nhu cầu sử dụng 'match'.

mã ví dụ này là để được áp dụng như middleware nhanh:

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 là một ứng dụng ví dụ cho thấy làm thế nào để làm render phổ sử dụng createServerRenderContext

Answer 3

Phản ứng Router v4

trong mới phiên bản (v4) nó đã bị xóa để tạoServerRenderContext. Điều này hoạt động theo cách rất khác so với trước đây nhưng ngắn gọn hơn nhiều.

ví dụ mã nhỏ này sẽ được áp dụng.

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

Bây giờ đó là một lớp của chính nó khi đó là một 404