本文共 3681 字，大约阅读时间需要 12 分钟。

共用部分

import React ,{
   useState} from 'react'import {
   connect} from 'react-redux'import {
   getIndexList} from '../store/index'const Index = (props) => {
       let [count,setCount] = useState(1)    return (        
   
            
    
服务端渲染
            
    
{
   count}
            
    {
   props.getIndexList()}}>加载            
    {
   setCount(count+1)}}>增加            {
                   props.list.map(item=>
    
{
   item.name}
)            }        
   
    )}Index.load = (store) => {
       return store.dispatch(getIndexList())}export default connect(    state => ({
   list:state.index.list}),    {
   getIndexList})(Index)

import axios from 'axios'const GET_LIST = 'INDEX/GET_LIST'// action const changeList = list => ({
       type:GET_LIST,    list})// 有一个请求 可以改变reducerexport const getIndexList = ()=>{
       return (dispatch)=>{
           return axios.get('http://xxxxxxxxxxx').then((res)=>{
               const {
   list} = res.data            dispatch(changeList(list))        })    }}const initState = {
       list:[]}export default (state = initState,action) => {
       switch(action.type){
           case GET_LIST:        const newState = {
               ...state,            list:action.list        }        return newState        default:            return state    }}

客户端

import React from 'react'import ReactDOM from 'react-dom'import {
   BrowserRouter} from 'react-router-dom'import {
   Provider} from 'react-redux'import {
   getClientStore} from '../store/store'import {
   Route,Link} from 'react-router-dom'import routers from '../router'const store = getClientStore()const App = ()=>{
       return (        
               
                    
     
                    
      首页                    
      登录                
     
                {
   routers.map(route=>
     )}            
            
       )}ReactDOM.hydrate(    
       ,document.getElementById('root'))

服务端

import express from 'express'import React from 'react'import {
   renderToString} from 'react-dom/server' // 专门在server端使用的import {
   StaticRouter} from 'react-router-dom'import {
   Provider} from 'react-redux'import {
   getStore} from '../store/store'import {
   Route,Link} from 'react-router-dom'import {
   matchRoutes} from 'react-router-config'import routers from '../router'let store = getStore()let app = express()app.use(express.static('public'))app.get('*',function(req,res){
       // 遍历所有的路由 寻找有load方法的    const matchedRoutes = matchRoutes(routers,req.path)    let promises = []    matchedRoutes.forEach(item=>{
           let {
   load} = item.route.component        if(load){
               const promise = new Promise((resolve,reject)=>{
                   load(store).then(resolve).catch(reject)            })              promises.push(promise)        }    })    Promise.all(promises).then(()=>{
           let content = renderToString(            
                   
                        
     
                        
      首页                        
      登录                    
     
                    {
   routers.map(route=>
     )}                
                
                       )        const html = `                                                                                                    
   
    ${
     content}
   
                                                                            `        res.send(html)    })        })app.listen(1000,()=>{
   console.log('监听1000端口成功');})

先编译客户端在启动服务端

"scripts": {
       "dev:server": "webpack --config webpack.server.js --watch",    "dev:start": "nodemon --watch build --exec node \"./build/bundle.js\"",    "dev:client": "webpack --config webpack.client.js --watch"  },

转载地址：https://codeboy.blog.csdn.net/article/details/107723690 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！