は、サーバとレンダリングルーターサーバーに反応私はこのようなオブジェクトを持って

Question

Here's an example from the docs.

import { renderToString } from 'react-dom/server' 
import { match, RouterContext } from 'react-router' 
import routes from './routes' 

serve((req, res) => { 
    // Note that req.url here should be the full URL path from 
    // the original request, including the query string. 
    match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { 
    if (error) { 
     res.status(500).send(error.message) 
    } else if (redirectLocation) { 
     res.redirect(302, redirectLocation.pathname + redirectLocation.search) 
    } else if (renderProps) { 
     // You can also check renderProps.components or renderProps.routes for 
     // your "not found" component or route respectively, and send a 404 as 
     // below, if you're using a catch-all route. 
     res.status(200).send(renderToString(<RouterContext {...renderProps} />)) 
    } else { 
     res.status(404).send('Not found') 
    } 
    }) 
}) 

小道具：

let reactServerProps = { 
    'gaKey': process.env.GA_KEY, 
    'query': req.query, 
} 

私はここにルータを反応

res.status(200).send(renderToString(<RouterContext {...renderProps} {...reactServerProps} />)) 

にこのオブジェクトを渡すためにしようとしています

そして、私は自分のコンポーネント内の変数にアクセスできないようです。

Answer 1

<ReactContext />は、通常のコンポーネントで予想されるカスタムの小道具ではなく、ビルドしたコンポーネントツリーに反応ルータの事前定義された小道具を渡すだけです。

この問題にはいくつかの回避策がありますが、特に問題はありません。私が見てきた最も普及しているのは、<ReactContext />を、Reactのコンテキスト機能&を利用することを唯一の目的とするコンポーネントで、文脈のデータを小道ではなく子供に渡すことです。

ので：あなたの特急サーバーで次に

import React from 'react'; 

export default class DataWrapper extends React.Component { 

getChildContext() { 

    return { 
     data: this.props.data 
    }; 

} 

render() { 

    return this.props.children; 
} 
} 

：

// Grab the data from wherever you need then pass it to your <DataWrapper /> as a prop 
// which in turn will pass it down to all it's children through context 
res.status(200).send(renderToString(<DataWrapper data={data}><RouterContext {...renderProps} /></DataWrapper>)) 

そして、あなたは、あなたの子コンポーネントにそのデータにアクセスできるようにする必要があります

export default class SomeChildComponent extends React.Component { 

constructor (props, context) { 

    super(props, context); 
    this.state = { 
     gaKey: context.data.gaKey, 
     query: context.data.query 
    }; 
} 

}; 

は、私が知っていますこれまではcreateElementメソッドを使用してカスタムの小道具を設定し、それらを通すことができましたあなたの子供のルートにも同様の方法で、私はそれがまだ反応ルータの新しいバージョンで有効であることは肯定的ではない。参照：https://github.com/reactjs/react-router/issues/1369

---

はUPDATE：ルート要素に追加の値を渡すためのミドルウェアを使用することも可能です。経由：https://github.com/reactjs/react-router/issues/3183

そして、あなたは文脈上で小道具を利用することができる必要があります：

function createElementFn(serverProps) { 
    return function(Component, props) { 
    return <Component {...serverProps} {...props} /> 
    } 
} 

その後、あなたのserverPropsを渡し、そのようなあなたの<RouterContext />でcreateElementを追加します。

res.status(200).send(renderToString(<RouterContext {...renderProps} createElement={createElementFn(serverProps)} />)) 

とアクセス彼らの子供のコンポーネントのいずれかで簡単にthis.props.gaKey & this.props.query

Answer 2

はるかに簡単な解決策はprops.routes中であなたが好きなデータ置くことであり、あなたが

props.routes.[whatever you passed in]

を通じて直接アクセスできる場所、とても役立つ機能であなたが

props.routes.reactServerProps = { 
'gaKey': process.env.GA_KEY, 
'query': req.query 
} 

を行うことができ、あなたのコンポーネントに渡されます

およびコンポーネントに、あなたはprops.routes.reactServerPropsとそれにアクセスすることができます。

はライアン・フィレンツェによる非常に最後のコメントを参照してください。 https://github.com/ReactTraining/react-router/issues/1017

は、彼が（複数可）を忘れてしまいました。ルートでは動作しません。