react的antdesignpro更改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}}
>
{uData.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>
)用excel制作表格
}}
>
</ProLayout>
)
}
此处给出⼀个简单⽰例，详情查看，官⽹给出了菜单的详细⽰例。
总之，我此处使⽤是menuRender⽅法，重写菜单。