javascript - 使用服务器 props 渲染 React Router 服务器

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,
}

我正在尝试将此对象传递到此处的 React 路由器中

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

而且我似乎无法从我的组件中提供对变量的访问。

Answer 1

问题是 <ReactContext />仅将一些 react-router 预定义 Prop 向下传递到它构建的组件树，而不是您在普通组件中可能期望的自定义​​ Prop 。

这个问题有一些解决方法，但没有一个特别好。我认为我见过的最广泛使用的是包装 <ReactContext />使用一个组件，其唯一目的是利用 React 的上下文功能并将上下文数据传递给它的 child 而不是 Prop 。

所以:

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方法来设置一些自定义 Prop 并以类似的方式将它们传递给您的子路由，但我不确定这在较新版本的 react-router 中仍然有效。请参阅:https://github.com/reactjs/react-router/issues/1369

---

更新:仍然可以使用中间件将附加值传递到路由组件中。通过:https://github.com/reactjs/react-router/issues/3183

而且你应该能够在上下文中使用 props:

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

然后添加createElement在你的<RouterContext />像这样，将它传递给你的 serverProps:

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

并使用简单的 this.props.gaKey 在您的任何子组件中访问它们& this.props.query