React + TypeScript 从零开始构建你的项目（二）：应用篇

2024-01-11 14:16:47

在上一篇文章中，我们介绍了如何使用 React 和 TypeScript 设置一个新的项目。在本篇教程中，我们将深入探讨构建实际应用的核心方面，从配置路由到创建组件。

路由配置

路由对于任何 Web 应用程序都是至关重要的，因为它允许用户在不同页面之间导航。对于 React 应用程序，我们使用流行的库 React Router DOM 来处理路由。

要在项目中安装 React Router DOM，请运行以下命令：

npm install react-router-dom

安装完成后，让我们在 app.jsx 文件中配置路由：

import { BrowserRouter, Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

在上面的代码中，我们配置了三个路由：一个用于主页（"/"，<Home/>），一个用于关于页面（"/about"，<About/>）和一个用于联系页面（"/contact"，<Contact/>）。

组件创建

现在我们已经设置了路由，让我们创建一个名为 Home 的组件，它将显示主页内容：

import React from "react";

const Home = () => {
  return (
    <div>
      <h1>欢迎来到主页！</h1>
      <p>这是使用 React 和 TypeScript 构建的应用程序的示例主页。</p>
    </div>
  );
};

export default Home;