在现代 Web 应用程序开发中，React 前端框架和 React Router 是非常流行的技术。React Router 提供了一种简单而强大的方式来管理 Web 应用程序的路由。本教程将介绍如何使用 TypeScript 和 React Router 构建一个完整的 Web 应用程序，并提供一些示例代码以帮助您入门。
前置知识
在开始本教程之前，您需要对 TypeScript 和 React 框架有一定的了解。如果您对这两项技术仍陌生，建议您先查阅相关的官方文档和教程。另外，您需要有 Node.js 的基础知识以及基本的 Web 开发经验。
安装和配置
首先，我们需要安装 React 和 React Router 库以及相关的开发工具和包。
您可以使用 npm 或 yarn 来安装这些库和包：
# 使用 npm 安装 $ npm install react react-dom react-router-dom @types/react @types/react-dom @types/react-router-dom # 使用 yarn 安装 $ yarn add react react-dom react-router-dom @types/react @types/react-dom @types/react-router-dom
这些命令会安装 React、React DOM、React Router 和 TypeScript 相关的类型定义包。
安装完成后，我们需要在 TypeScript 项目的配置文件中进行一些设置。
在 tsconfig.json 文件中，您需要启用 strict 选项，并设置 jsx 选项为 "react"。这些设置将确保您的 TypeScript 代码符合 React 和 React Router 的要求。
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
------------------ -----
--------- -----
------ --------
------------------- -------
------------ -----
-------------- -----
--------- -------
------ ------- ------ -----------------
--
---------- ----------------
-创建路由
接下来，我们将创建路由。在 React Router 中，我们可以使用 BrowserRouter 和 Route 组件来定义我们的路由。
在您的项目中创建 src 目录，然后创建一个名为 index.tsx 的文件。在这个文件中，我们将使用 BrowserRouter 和 Route 组件来创建我们的路由。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - -------------- ----- - ---- -------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
----- --- - -- -- -
---------------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
----------------
--
----------- --- ---------------------------------在上述代码中，我们创建了一个 App 组件，它包含了两个 Route 组件：一个用于处理主页路由，另一个用于处理关于页面路由。这些路由都被包裹在 BrowserRouter 组件中，这样我们就可以在我们的应用程序中使用浏览器历史记录 API 来处理路由转换。
现在我们需要在 pages 文件夹中创建两个组件：Home 和 About。
在 pages/Home.tsx 中，我们创建了一个简单的 React 组件，用于处理主页路由。
import React from 'react';
const Home = () => {
return <h1>欢迎来到主页！</h1>;
};
export default Home;同样，在 pages/About.tsx 中，我们创建了另一个简单的 React 组件，用于处理关于页面路由。
import React from 'react';
const About = () => {
return <h1>关于我们</h1>;
};
export default About;现在，我们已经完成了路由的创建和组件的编写。接下来，我们可以在浏览器中启动应用程序，测试我们的路由配置是否有效。
处理路由参数
在应用程序中，有时需要从 URL 中解析参数。React Router 提供了一种灵活的方式来处理路由参数。
在创建路由时，可以使用“参数路径”语法，将参数传递给组件。对于一个参数为 id 的路由，可这样定义路由组件：
<Route path="/user/:id" component={User} />使用 :id 语法可以将路由参数传递给组件。在您的组件中，您可以通过 props.match.params 访问这些参数。
例如，在下面的例子中，我们从路由中获取用户 ID 并显示它：
import React from 'react';
const User = (props: any) => {
return <h1>用户 ID: {props.match.params.id}</h1>;
};
export default User;在上述代码中，我们使用 props.match.params.id 访问了一个名为 id 的路由参数。
嵌套路由
有时，您可能希望在一个路由组件中包含一个或多个子路由组件。
例如，我们可能有一个 App 组件，其中包含主页、关于页面和用户页面。用户页面本身可能包含一个“我的文档”页面和一个“收件箱”页面。
在这种情况下，我们可以将“用户”路由设为父级路由，而“我的文档”和“收件箱”路由设为其子路由。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ----- - ---- -------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
------ ---- ---- ---------------
------ ------ ---- -----------------
------ ------- ---- ------------------
----- --- - -- -- -
---------------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
------ ---------------------- -----------------
------ --------------------------- ------------------ --
------ ---------------------------- ------------------- --
--------
----------------
--
------ ------- ----在上述代码中，我们在 Route 中嵌套了两个子路由，MyDocs 和 MyInbox。
在 User 组件中，我们可以通过 props.children 访问这些子路由组件，并在需要时渲染它们。
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - ------- ---- -- -
------ -
-----
-------- ----------------------------- ----------
----------------
------
--
--
------ ------- -----在上述代码中，我们使用 props.children 渲染了子路由组件。这样，当用户访问 /user/:username/docs 或 /user/:username/inbox 时，相应的子路由组件将被渲染。
总结
本教程介绍了如何使用 TypeScript 和 React Router 来构建一个完整的 Web 应用程序。我们讲解了如何创建路由、处理路由参数以及嵌套路由。希望这篇教程能帮助您入门 React Router 并为您的下一个项目奠下基础。如果您还有任何疑问或建议，请随时在评论中留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7c7b648841e989445cdfa