我正在学习开发react.js服务器端渲染Web应用程序,我正在使用Express.js和Swig作为服务器端
server.js
import express from 'express'
import path from 'path'
import React from 'react'
import { StaticRouter } from 'react-router'
import { renderToString } from 'react-dom/server'
import { Provider } from 'react-redux'
import setupSwig from 'setup.swig'
import { setupStore } from '../shared/redux/store'
import { ajaxFunction } from '../shared/services/Customer'
import App from '../shared/components/App'
const app = express()
app.use(express.static(path.resolve(__dirname, '..', '_public')))
setupSwig(app)
app.use((req, res) => {
const url = req.url
ajaxFunction()
.then(({ data: customers }) => {
const context = {}
const store = setupStore({
customers
})
const html = renderToString(
<Provider store={ store }>
<StaticRouter location={ url } context={ context }>
<App />
</StaticRouter>
</Provider>
)
const initState = store.getState()
res.render('./index.swig', { html, initState })
})
}
})
app.listen(3000)
client.js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { setupStore } from '../shared/redux/store'
import App from '../shared/components/App'
const initState = window.__INIT_STATE__
delete window.__INIT_STATE__
const store = setupStore(initState)
render(<Provider store={ store }>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>, document.getElementById('reactApp'))
在server.js我用<StaticRouter location={ url } context={ context }>
,但我不知道怎样做((什么props
与通过)的<BrowserRouter>
上client.js重定向到特定的URL如/customers
, /about
如果我做错了方法也请指导
谢谢