背景

因为react-router 的路径是没有.html后缀的，这样对于和其他系统有交互的时候，让别人改url地址不是很方便，所以想办法进行了老系统的兼容操作。

根文件代码

import React from 'react';
import { useRoutes } from 'react-router-dom'
import routes from './routes/index'const App: React.FC = () => {// const [isDarkMode, setIsDarkMode] = useState(false);// const navigate = useNavigate();const routeView = useRoutes(routes);return (<div className="App" style={{ width: '100%', height: '100%'}}>{ routeView }</div>)
}export default App;

路由代码

import { Navigate } from "react-router-dom";
import Iframe from '@/pages/iframe/iframe.tsx'
import Index from '@/pages/index/index'export default [{path: '/',element: <Navigate to="/public/iframe" replace />},{path: '/public/iframe.html',element: <Iframe />},{path: '/public/iframe',element: <Iframe />},{path: '/public/index.html',element: <Index />},{path: '/public/index',element: <Index />},{path: '/*',element: <Navigate to="/public/iframe" replace />},
] as {path: string,element: JSX.Element
}[]

1. path: '/', 代表不添加路径时候要引用的组件
2. path: '/*' 代表找不到路径时候引用的组件
3. path: '/public/index.html', path: '/public/index', 同时兼容 带.html后缀和不带后缀的引用方式

nginx配置

	server {listen 2024;     server_name localhost;location / {root C:app/dist;index index.html;try_files $uri $uri/ /index.html;}}

try_files $uri $uri/ /index.html; 可以默认将访问指向到index.html.对于history模式的路由很有用。