react+ts+antd将路由封装在route.ts中实现路由跳转

在React项目中结合TypeScript (TS) 和 Ant Design，我们通常会利用React Router库来管理应用的路由。为了将路由封装在`route.ts`文件中并实现路由跳转，你可以按照以下步骤操作：

1. 安装依赖：
- 首先，确保已经安装了`react-router-dom`、`@types/react-router-dom`（用于TypeScript支持）以及`antd`库。

npm install react-router-dom @types/react-router-dom antd

2. 创建`route.ts`文件：
- 创建一个新的文件`route.ts`，在这个文件中导入需要的模块，并创建一个函数或类来配置路由。

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';

// 如果需要，可以导入自定义组件或其他相关的TS类型
import Home from './Home';
import About from './About';

const routes = [
  {
    path: '/',
    component: Home,
    exact: true,
    // 使用Menu和Link来生成导航链接
    menu: (
      <Menu>
        <Menu.Item key="home">
          <Link to="/">首页</Link>
        </Menu.Item>
        <Menu.Item key="about">
          <Link to="/about">关于</Link>
        </Menu.Item>
      </Menu>
    ),
  },
  {
    path: '/about',
    component: About,
  },
];

const AppRouter: React.FC = () => {
  return (
    <Router>
      {/* 使用Layout和routes数组来组织页面结构 */}
      <Layout>
        <Layout.Sider>
          {/* 在这里放置你的侧边栏菜单 */}
          {routes.map((route) => route.menu)}
        </Layout.Sider>
        <Layout.Content>
          {routes.map((route) => (
            <Route key={route.path} {...route} />
          ))}
        </Layout.Content>
      </Layout>
    </Router>
  );
};

export default AppRouter;

3. 路由跳转：
- 在需要跳转的地方，你可以使用`<Link>`标签配合`to`属性指向对应的路径，或者使用`useHistory` hook来自React Router进行程序式的跳转。

例如，在组件内部跳转：

import { useHistory } from 'react-router-dom';

function SomeComponent() {
  const history = useHistory();
  
  const handleClick = () => {
    history.push('/about');
  };
  
  return (
    // ...
    <button onClick={handleClick}>跳转到关于页</button>
    // ...
  );
}