个人技术分享

背景

因为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模式的路由很有用。