使用react-router 4进行服务器端渲染,如何渲染客户端版本?

问题描述 投票:1回答:0

我正在学习开发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

如果我做错了方法也请指导

谢谢

reactjs serverside-rendering react-router-v4
© www.soinside.com 2019 - 2024. All rights reserved.