react的ant design pro更改history模式

由于ant design pro默认使用的是browser模式，发布到线上环境后，刷新浏览器后出现404(页面未找到)，而在本地环境怎么刷新都是正常的。所以就上网各种查资料，原来需要将history设置为hash模式就正常了。

1、设置history为hash

config

config.ts

export default defineConfig({
	history: {
	    type:'hash'
	}
})

2、设置成功，部署后刷新浏览器能找到页面了，但是出现新的问题了，原来的菜单选中效果和选中状态不见了，恢复browser模式又是正常的。

查询资料未果，我就只能重新写个菜单了

src

layouts

BasicLayout.tsx

import React, { useEffect,useState } from 'react';
import { Menu } from 'antd';
const BasicLayout: React.FC<BasicLayoutProps> = (props) =>{
	const [openKeys, setOpenKeys]: [string[], any] = useState(["sub1"]);
  	const [rootSubmenuKeys, setRootSubmenuKeys ]: [any[], any] = useState(['sub1','sub2','sub3']);
  	const {
	    location = {
	      pathname: '/',
	    },
	  } = props;
	const onOpenChange = (openKey) => {
 	const latestOpenKey = openKey.find(key => openKeys.indexOf(key) === -1);
	    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
	      setOpenKeys(openKey)
	    } else {
	      setOpenKeys(latestOpenKey ? [latestOpenKey] : [])
	    }
	  }
	return (
	<ProLayout
		menuRender={(props) => {
	       return (
	         <Menu
	           mode="inline"
	           openKeys={openKeys}		//展开的key
	           onOpenChange={onOpenChange}	// 菜单展开收起触发
	           defaultSelectedKeys={[location.pathname]}	// 刷新浏览器默认定位菜单
	           style={{ width: 200 }}
	         > 
	           {props.menuData.map((item,index)=>{
	             return(
	               <SubMenu
	               key={item.key}
	               title={
	                 <span>
	
	               <span>{item.name}</span>
	                 </span>
	               }
	               style={{ width: 200 }}
	           >
	             {item.children.map(itemProps => (
	               <Menu.Item key={itemProps.key}><Link to={itemProps.path}>{itemProps.name}</Link></Menu.Item>
	             ))}
	           </SubMenu>
	             )
	           })}
	           
	         </Menu>
	       )
	     }}
		>
	</ProLayout>
	)
}

此处给出一个简单示例，详情ant.design查看，官网给出了菜单的详细示例。

总之，我此处使用是menuRender方法，重写菜单。