路由_react

最新推荐文章于 2025-01-08 15:09:55 发布

ડꪊꪀེ๑҉217

最新推荐文章于 2025-01-08 15:09:55 发布

阅读量94

点赞数

文章标签：网络

本文链接：https://blog.youkuaiyun.com/weixin_70842178/article/details/133920733

版权

const frameComponent = Loadable({
  loader: () => import('@views/Layout/FramePage/Index'),
  loading: defaultLoad
})
{
    path: '/repository/home',
    component: frameComponent,
    exact: true,
    meta: {
      title: '',
      frameUrl: `${extendUrl}repository/home`
    }
  },

exact：exact默认为false，如果为true时，需要和路由相同时才能匹配，但是如果有斜杠也是可以匹配上的。如果在父路由中加了exact，是不能匹配子路由的,建议在子路由中加exact

strict：strict默认为false，如果为true时，路由后面有斜杠而url中没有斜杠，是不匹配的

react-loadable

动态加载组件，@loadable/component也可

const LoadableComponent = Loadable({
  loader: () => import('./Bar'),
  loading: Loading,
  delay: 200,
  timeout: 10000,
});

路由跳转传参

1：history对象

import {useHistory} from 'react-router-dom'

export default function App() {
  const history = useHistory()
  // 跳转到指定页面
  history.push('/home')
  
  // 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-1 表示后退到上一页）
  history.go(-1) 
  
  // 替换到当前页面,展示指定页面
  history.replace('/login') 
}

2：location对象

组件中的props对象包含了location

3：useLocation这个Hook获取

埋点操作 sa-sdk-javascript

import sensors from "sa-sdk-javascript";
let shengceServer_url = "http://xnjkfxsit.cpic.com.cn/sa?project=SXXT"; //外网测试环境
 
sensors.init({
  sdk_url: "lib/sensorsdata.min.js",
  name: "sensors",
  server_url: shengceServer_url,
  show_log: true,
  is_track_single_page: false,
  heatmap: {
    //是否开启点击图，default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭。
    clickmap: "default",// 是否开启触达图，not_collect 表⽰关闭，不会⾃动采集 $WebStay 事件，可以设置 'default' 表⽰开启。
    collect_tags: {
      div: {
        max_level: 1, // 默认是 1，即只支持叶子 div。可配置范围是 [1, 2, 3],非该范围配置值，会被当作 1 处理。
      },
      li: true,
      img: true,
      svg: true,
      // ... 其他标签
    },
  },
});
 
let user_id = 23;
sensors.login(user_id );
sensors.quick("autoTrack");
sensors.registerPage({
  $url: window.location.href, // 做截取，参数不要
  $referrer: document.referrer, // 前向地址
  // 自身系统的名字
  systemName: "系统名称",
});