用 TypeScript 反应路由器 DOM - Shell-Bash

TypeScript 是一种面向对象的编程语言，它是 JavaScript 的超集，它为 JavaScript 提供了类型和强大的面向对象编程能力。React 是一个用于构建用户界面的强大的 JavaScript 库，而路由器是用于管理用户在应用程序中导航的工具。本篇文章将介绍如何使用 TypeScript 和 React Router 来构建一个 DOM 路由器。

安装 TypeScript

在开始使用 TypeScript 之前，您需要安装 TypeScript。您可以通过 npm 使用以下命令来安装 TypeScript：

npm install -g typescript

创建项目

我们将使用 Create React App 工具来创建我们的项目。您可以使用以下命令在终端上进行安装：

npx create-react-app dom-router --template typescript

安装 React Router

在我们的项目中使用 React Router 需要安装以下库：

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

创建 React 组件

接下来，我们需要创建一个 React 组件。在我们的示例中，我们将创建一个简单的导航栏，该导航栏由两个菜单项组成。我们将使用 NavLink 组件来定义我们的导航链接。以下是我们的组件代码：

import React from 'react';
import { NavLink } from 'react-router-dom';

const Navbar: React.FC = () => {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to='/'>Home</NavLink>
        </li>
        <li>
          <NavLink to='/about'>About</NavLink>
        </li>
      </ul>
    </nav>
  );
};

export default Navbar;

我们使用 React.FC 泛型来定义 Navbar 组件。该组件返回一个包含两个 NavLink 组件的导航菜单。NavLink 组件用于定义路由链接，to 属性用于指定链接的 URL。

配置 React Router

我们已经创建了导航组件，现在我们需要将 React Router 集成到我们的应用程序中。我们需要在 App.tsx 文件中导入 BrowserRouter 组件，并在其内部包含我们的组件。以下是我们的代码：

import React from 'react';
import { Route, BrowserRouter } from 'react-router-dom';

import Navbar from './components/Navbar';

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Navbar />
      <main>
        <Route path='/' exact>
          <h1>Home Page</h1>
        </Route>
        <Route path='/about'>
          <h1>About Page</h1>
        </Route>
      </main>
    </BrowserRouter>
  );
};

export default App;

在这个例子中，我们使用 Route 组件来定义我们的 URL 路由。path 属性用于定义 URL 的路径，exact 属性用于指定匹配路由的方式。

运行应用程序

我们已经完成了我们应用程序的开发。您可以使用以下命令在本地计算机上启动该应用程序：

npm start

在您的 Web 浏览器中打开应用程序，并尝试在导航栏上单击链接。此时，应用程序应该能够正确地导航到相应的 URL。

总结

正如您所看到的，使用 TypeScript 和 React Router 构建 DOM 路由器非常容易。通过使用 TypeScript，我们可以编写更安全的代码，并利用面向对象编程的优势。React Router 为我们提供了一个简单而强大的工具来管理应用程序的导航。