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;