react + ts 怎么添加路由

在React中使用TypeScript（TS）来添加路由，可以使用React Router库。下面是一个简单的示例，演示如何在React中使用TypeScript和React Router来添加路由：

首先，确保你已经安装了React Router库：

npm install react-router-dom

然后，创建一个路由配置文件，比如`AppRouter.tsx`：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

const AppRouter: React.FC = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

export default AppRouter;

在上述示例中，我们引入了`BrowserRouter`作为我们的路由器，并使用`Switch`组件来包裹我们的路由规则。然后，我们通过`Route`组件来定义每个路径对应的组件。

接下来，在你的根组件中使用这个路由器：

import React from 'react';
import AppRouter from './AppRouter';

const App: React.FC = () => {
  return (
    <div>
      <h1>My React App</h1>
      <AppRouter />
    </div>
  );
};

export default App;

现在，你就可以在项目中创建`Home.tsx`和`About.tsx`等组件，分别对应路由中的路径。

这只是一个简单的示例，你可以根据自己的需求扩展和配置更多的路由规则。希望对你有帮助！