如何在Typescript中使用命名路由器视图？

// 1. 安装依赖包
// npm install react-router-dom

// 2. 创建路由配置文件
// routes.tsx
import { RouteConfig } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

const routes: RouteConfig[] = [
  {
    path: '/',
    component: Home,
    exact: true,
    name: 'Home',
  },
  {
    path: '/about',
    component: About,
    exact: true,
    name: 'About',
  },
  {
    path: '/contact',
    component: Contact,
    exact: true,
    name: 'Contact',
  },
];

export default routes;

// 3. 在应用程序的入口文件中使用路由器组件
// App.tsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import routes from './routes';

const App: React.FC = () => {
  return (
    <Router>
      <Switch>
        {routes.map((route) => (
          <Route
            key={route.path}
            path={route.path}
            component={route.component}
            exact={route.exact}
          />
        ))}
      </Switch>
    </Router>
  );
};

export default App;

// 4. 在组件中使用命名路由器视图进行导航
// Navbar.tsx
import React from 'react';
import { Link } from 'react-router-dom';

const Navbar: React.FC = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;