umi改為路由改為hash模式，Ant Design Pro Components的ProLayout 選單不出來了

umi改為路由改為hash模式，Ant Design Pro Components的ProLayout 選單不出來了

最近寫的專案，用的Umi+Ant Design Pro Components,專案基本開發完成到了上線的時候發現，不啟用路由的hash模式會導致在專案的子頁面重繪會404（使用的nginx），

最開始我看其他人的解決方案是這樣
在nginx上做配置，使nginx的指向指到index.html，但是我自己嘗試后并沒有成功（應該是我自己的原因，沒弄好)

location / {
            root   /data/webapp/vue/dist;
            index  index.html;
            try_files $uri $uri/ /index.html;
        }

之后想起來以前寫的vue的時候路由使用的hash模式就沒有這樣的問題
于是果斷把umi的路由也改成了hash模式如下:

history:{type:'hash'},
  hash:true,

結果就是解決了子頁面重繪會404的問題，但是缺出現了新的問題———原本在左邊的選單欄不出現了

這是原本的樣子

這是使用了hash模式后的樣子

這里的選單欄，我使用的是Ant Design Pro Components的ProLayout 高級布局
經過我一頓嘗試，發現，之所以開啟了hash模式后左邊的選單不出來了，是由于在umi的umirc.ts檔案里開啟了hash模式后，Ant Design Pro Components ProLayout并非是hash模式，而是依然使用的browser模式，這就導致了ProLayout需要匹配的路由資訊一直是#,于是ProLayout就認為當前并沒有進入任何選單,所以左邊的選單欄就被隱藏了，

然后我嘗試在#的前面加上路由地址，果然，選單欄出現了

經過我在Ant Design Pro Components的官網上一頓找檔案后發現,可以使用location去設定目前ProLayout被選中的選單欄，從而讓選單欄不再被隱藏，于是我便通過history.location.pathname拿到當前的路由地址，從而去設定當前選單被選中的項.

import React, { useEffect, useState } from 'react';
import { Button} from 'antd';
import { SmileOutlined, CrownOutlined, TabletOutlined, AntDesignOutlined } from '@ant-design/icons';

import type { MenuDataItem, ProSettings } from '@ant-design/pro-layout';
import ProLayout, { PageContainer } from '@ant-design/pro-layout';
import defaultProps from '@/config/customMenu'
import { Link,history  } from 'umi';
import ApiSetting from '@/services/api';

const IconMap = {
  smile: <SmileOutlined />,
  crown:<CrownOutlined/>,
  tablet:<TabletOutlined/>,
  antDesign:<AntDesignOutlined/>
};


const logoDiv = ()=>{
  const imageSrc = require('@/assets/img/logo.png')
  return(
    <img style={{width:'35px'}} src={imageSrc} />
  )
}



export default (props:any) => {
  const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({ fixedHeader: true,fixSiderbar:true, layout:'mix',splitMenus:true,});
  const [pathname, setPathname] = useState('/contracts/myContracts/allContracts');

/*
*當路由地址變化后，將當前的路由資訊賦值給pathname
**/
  useEffect(() => { 
    setPathname(history.location.pathname)
  },[history.location.pathname]);



  function createContact(){
    history.push('/contracts/myContracts/createContract')
  }

  return (
    <div
      id="test-pro-layout">
      <ProLayout
        title="****"
        logo={logoDiv}
        location={{ pathname: pathname }} //在這里設定當前被選中的選單
        menu={{ request: async () => defaultProps }}
        defaultCollapsed
        onMenuHeaderClick={(e) => console.log('點擊logo')}
        menuItemRender={(json) => {
          if(json.path=='/contracts'){
            return <Link to='/contracts/myContracts/allContracts'>****</Link>
          }
          if(json.path=='/application'){
            return <Link to='/application/applicationManagement/adhibition/applicationList'>****</Link>
          }
            return <Link to={json.path!}>{json.name}</Link>

        }}
        menuExtraRender={()=>{
          return(
            <div style={{textAlign:'center',display:props.location.pathname.indexOf('contracts')!=-1?'block':'none'}}>
              <Button type="primary" onClick={createContact}>****</Button>
            </div>
          )
        }}
        {...settings}
      >
        <PageContainer ghost header={{title:''}}>
          <div>
            {props.children}
          </div>
        </PageContainer>
      </ProLayout>
    </div>
  );
};