如何利用TypeScript進行React路由配置

要利用TypeScript進行React路由配置，可以使用React Router庫。以下是一個簡單的示例：

1. 首先安裝React Router庫：

npm install react-router-dom

2. 創建一個路由配置文件（例如Routes.tsx）：

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

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

export default Routes;

3. 在App.tsx中引入Routes組件：

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

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

export default App;

4. 創建Home和About組件：

import React from 'react';

const Home: React.FC = () => {
  return <h2>Home</h2>;
};

export default Home;

import React from 'react';

const About: React.FC = () => {
  return <h2>About</h2>;
};

export default About;

5. 運行應用并訪問http://localhost:3000可以看到Home頁面，訪問http://localhost:3000/about可以看到About頁面。

通過以上步驟，就可以利用TypeScript進行React路由配置。