History路由访问多页应用🥷自救指南前言在React多页应用配置🥷自救指南中通过craco.config.js

前言

在React多页应用配置🥷自救指南中通过craco.config.js重写了webpack配置，配置react项目的多页打包，生成了h5.html与index.html。

执行yarn start即可开启本地开发服务器，浏览器输入http://loaclhost:3000/h5.html即可访问h5.html，输入http://localhost:3000即可访问index.html。

有同学可能会问：“访问http://localhost:3000/h5能访问到h5.html页面吗？”

答：不能，并且仍返回index.html。

/能访问到index.html的原因是webpack-dev-middleware内设置了如果没有指定index，则默认返回index.html，所以请求/h5时也是返回index.html。

请求/h5.html是访问具体的资源文件，不经过index，刚好服务器上也有这个文件，所以就返回了h5.html。

如果想通过history路由访问多页面，通过服务器配置可以完美实现，此文看了不亏😬😬。

开发环境devServer配置

如果想通过/h5路由访问到h5.html，可以通过重写webpack devServer.historyApiFallback配置项，设置对应path下的访问页面。

devServer: {
     historyApiFallback: {
         rewrites: [
             { from: /^\/h5/, to: '/h5.html' },
             { from: /./, to: '/index.html' },
         ]
     }
}

正则匹配path，返回对应的html页面。

如此设置后，启动本地服务器，通过http://localhost:3000/h5访问时，可以返回h5.html页面，同时刷新页面，也能正常返回页面。

设置了本地开发环境服务器配置，当然也需要对生产环境的服务器配置。

生产环境`Nginx`配置

平时前端项目部署到nginx服务器， API请求转发到对应后台。前端主要涉及到的是server下的location模块

前置知识：

前端采用history路由，需要服务器配置，否则页面刷新时，请求对应路径资源，而服务器下没有该资源则会出现404情况。
hash路由不需要服务器配置，因为hash路由不会请求后台。

避免在history路由下返回404的情况，配置的关键是try_files指令：

location / {
    root /opt/public;
    index index.html;
+   try_files $uri $uri/ /index.html;
}

针对以上指令，简单介绍下。假设此时访问的路径为/login：

root指令：指定文件目录，请求资源在此目录下查找。
index指令：指定默认页面为index.html。如果请求具体的文件，e.g. xxx.js|css|html则不经过index指令，找到资源文件后直接返回。
try_files指令：指定当服务器未找到对应资源时，按照顺序依次查找资源并返回。login -> login/index.html -> index.html。返回对应html文件后，如果前端项目内有路由，此时将由前端路由接管，返回匹配到/login的路由组件。如此便能在刷新页面时，仍能正确访问页面了。

alias与root类似，也是指定资源查找目录，与root2选1即可。区别是：root是拼接，alias是替换。假设此时请求路径是/login/test：

root: /opt/public/login/test
alias: /opt/public/test

回到最初的问题，我们想请求/h5时返回h5.html，按照以上配置，依葫芦画瓢新增一个location规则：

location /h5 {
    root /opt/public;
    index h5.html;
    try_files /h5.html;
    add_header Cache-Control no-store;
}

还可以设置缓存策略，Cache-Control: no-store不缓存，每次都请求服务器返回新资源。关于缓存策略可以查看这篇文章：再看一次HTTP缓存，下次一定会！

前端路由

按照上面设置后，可以将H5页面按照我们熟悉的SPA开发模式，添加react-router，来进行前端路由组件切换。

注意： 配置前端路由时，path前缀均是/h5，如此才会匹配到对应路由规则。例如：

[
    {
        path: '/h5',
        element: <Layout />,
        children: [
            { path: 'home', element: <h1>home</h1> },
        ],
    },
    { path: '/h5/login', element: <h1>login</h1> },
]

而原来的index.html的路由配置不变，根路径是/。

最后

这份多页面配置，不止适用React，还有Vue等使用webpack打包的前端项目，生产环境服务器配置思路也是一样的.

欢迎大家评论区友好交流，End.

History路由访问多页应用🥷自救指南

前言

开发环境devServer配置

生产环境Nginx配置

前端路由

最后

生产环境`Nginx`配置