多页面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/;
         }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值