react服务端渲染路由改写

Posted 2022-06-17 longlongdan

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字符串的生成  
   ）