react服务端渲染（八）路由改写

1. 每一个用户使用不同的store
2. 请求发送axios/fetch，选择使用fetch进行异步请求的发送 在浏览器端可以直接使用fetch发送，无需安装。但是服务端会报error：fetch is not defined，因为fetch()是为浏览器设计的，然后在第三方模块中后端移植到node.js，所以需要安装node-fetch；

   import fetch from ‘node-fetch‘

3. 定义常量保存字符串 避免错误难以发现
4. componentDidMount只会在客户端执行 服务端不执行，解决办法：给每一个组件写一个静态方法（例如:getData），服务端通过匹配path参数，拿到每个组件对应的方法执行https://www.npmjs.com/package/react-router-config
1. 给组件写一个静态方法

   const Home = () => {
       useEffect(() => {
           Home.getData()
       })
   
       return(
           <div></div>
       )
   }
   //静态方法
   Home.getData = () => {
        // console.log(123);
   }

2. 改写我们的路由

   export default [
       {
           path: ‘/‘,
           exact: true,
           getData: Home.getData,
           component: Home,
       },{
           path: ‘/Login‘,
           getData: ()=>{console.log(‘getData login‘)},
           component: Login
       }
   ]

5. 结合用户请求的路径判断异步请求的接口，react-router-config复杂路由配置：matchRoutes 多级路由匹配

   //匹配我们的路由
   const mathPath = matchRoutes(Routers,req.path);
   //遍历匹配到的路由 执行对应的方法 由于方法是异步的使用promise.all来在所有方法执行完毕之后 再渲染store
   mathPath.map(path=>{ path.route.getData? promiseAll.push(path.route.getData(Store.dispatch)):‘‘ })
   Promise.all(promiseAll).then(()=> {
     //执行html字符串的生成
   }）

原文地址：https://www.cnblogs.com/longlongdan/p/11307173.html