Question

这很简单。 React路由重定向路径取决于cookie中的值，那么如何在服务器端处理它？</ p>

render() {
  something = cookie.get('my-something-value') || 'default '; // always takes defualt value beacuse cookies are not available 
  return (
    <Switch>
      <Route />
      <Route />
      <Redirect to={`/something/${val}`}/>
    </Switch>
  )
}

因此服务器中的renderToString方法将元素解析为字符串而忽略了这种情况，即使设置了cookie，我也会得到错误的重定向

Answer 1

我曾经遇到过类似的问题。解决方法：

将包含cookie的额外道具（此处为serverCookie）传递到renderToString中的路由。
在render方法中（已定义所有路由/重定向）；检查是否在客户端或服务器上调用它。如果它在服务器端，请使用包含cookie的新道具（此处为serverCookie），否则请从客户端使用cookie.get。
在客户端呈现路由时，额外的道具（此处为serverCookie）不可用。

我在服务器端的renderToString看起来像这样：

switchMap

MyRoutes文件如下：

renderToString(
  <Provider store={store}>
    <StaticRouter ...>
      <MyRoutes ... serverCookie={req.headers.cookie} />
    </StaticRouter>
  </Provider>
)

注意：使用前，您需要使用一些cookie解析器正确解析cookie。

希望它可以帮助您解决问题。还原任何疑问/澄清。

Answer 2

使用cookie解析器中间件

npm i cookie-parser

示例

var express = require('express')
var cookieParser = require('cookie-parser')

var app = express()
app.use(cookieParser())

app.get('/', function (req, res) {
  // Cookies that have not been signed
  console.log('Cookies: ', req.cookies)

  // Cookies that have been signed
  console.log('Signed Cookies: ', req.signedCookies)
})

app.listen(8080)

从React SSR访问cookie

2 个答案: