多页面BrowserRouter和Nginx动态配置

背景

项目优化打包后的结构如下。红色框为主页面目录。每一个页面都存在一个index.html页面渲染模版。react项目采用BrowserRouter进行路由。

单页面配置，默认会使用index.html，但对于多页面会存在多个html模版，需要对html模版进行动态匹配。

以activity为例：

• 页面访问路径为：http://me.x.com/datadrive/page/activity/list
• BrowserRouter basename=“/datadrive/page/”
  注意：使用basename是为了更好的进行nginx配置，对页面进行匹配

打包后的目录如下：
注意：
1、打包后的html文件需要放在dist/datadrive/page下，与basename路径保持一致
2、静态资源配置，需要在webpack配置中设置publicPath=‘/datadrive/static/’，可以为其他静态资源设置统一的nginx匹配路径

Router 配置示例

多页应用中的单页面可能会存在多个子页面，进行路由配置可以更好的节约前端资源。

export default function RouteConfig(routes) {
    return (
        <ErrorBoundary>
            <Provider store={store}>
                <Router basename="/datadrive/page/">
                    <DMPage>
                        <Routes>{getRoutes(routes)}</Routes>
                    </DMPage>
                </Router>
            </Provider>
        </ErrorBoundary>
    );
}

页面入口配置举例

使用统一的路由方式和规范。更方便进行页面和路由管理。

Nginx 配置示例

使用正则匹配获取页面名称，重写后进行访问，注意basename的合理使用和配置，tryfiles和正则匹配中都必须要有，会进行html页面重写后加上uri，所以会匹配多次。

server {
         listen 80;
         #server_name localhost_80;
         # access_log /export/Logs/servers/nginx/logs/access_81.log;
         # error_log /export/Logs/servers/nginx/logs/error_81.log;

         
        location  ~* \/datadrive\/page\/([a-zA-Z]+)\/(.*) {
                alias /Users/songmeinuo/Documents/coding/datadrive/dd-PUB/dist/;
                index  $1/index.html;
                # url 切换时始终返回index.html
                try_files $uri $uri/ /datadrive/page/$1/index.html;
                #rewrite (.*) /datadrive/page/index.html;
                #break;
         }
         
         
         location /datadrive/static/ {
                alias /Users/songmeinuo/Documents/coding/datadrive/dd-PUB/dist/datadrive/;
         }
    }