react部署

一、build后部署会白屏
出现白屏说明路径不对，相似于vue的basePath
react官方并无给出明显的配置
不过新版node的packge.json却是支持一个homepage的属性
若是设了此属性，那么文件资源应用路径将按照此属性的值，这对于前端的框架来讲就很好用了

好比：好比咱们用 create-react-app 开发的 React 应用，以及 Vue CLI 开发的项目，默认是继承了 webpack 的，当不配置 homepage 属性，build 打包以后的文件资源应用路径默认是 / 

当咱们在package.json的homepage设置以下

{
  "name": "aegis-monitor-page",
  "homepage": "./"
}

 

编译后的效果以下，就不会白屏了

 

二、一刷新页面就丢失了

这是由于你用了historyRouter并且后端也没有和你作适配，改为hashRouter就行。

 

三、如何在组件以外使用路由
建立history对象模块，将其绑定到路由上，而后再在别的地方使用

四、如何在路由控制外使用路由
使用withRouter高阶组件包裹

import style from './style.less';
import React, { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

const TopNav = (props: any) => {
  useEffect(() => {

  }, [])
  const topNavClick = (id: any) => {
    props.history.push(id);
    console.log(props.location.pathname)
  };
  const servers = [
    {
      id: '/base-info',
      name: '基本信息'
    },
    {
      id: '/log',
      name: '日志查看'
    },
    {
      id: '/shell',
      name: '执行脚本'
    },
    {
      id: '/redeploy',
      name: '从新部署'
    },
    {
      id: '/other',
      name: '其余操做'
    }
  ];
  return (
    <div className={style.topNav}>
      <div className={style.logo}>我是logo</div>
      <div className={style.navs}>
        {servers.map((item: any) => {
          const isCuree = props.location.pathname === item.id;
          const styles = isCuree ? style.navActive : style.nav;
          return (<div key={item.id} className={styles} onClick={() => { topNavClick(item.id) }}>
            {item.name}
          </div>)
        })}
      </div>

    </div>

  );
}
const cmp = withRouter(TopNav);
export default cmp;