十分钟 TypeScript 版 React 路由指南

TypeScript 中的 React 路由：终极指南

配置路由包

踏入 React 路由之旅的第一步是安装必要的包。在终端中运行以下命令安装 React 路由 DOM：

npm install react-router-dom

别忘了安装 TypeScript 声明文件：

npm install @types/react-router-dom

创建页面

接下来，让我们创建一些页面来展示路由的强大功能。在 src 文件夹中创建一个名为 pages 的文件夹，然后在其中创建两个文件：Home.tsx 和 About.tsx。

在 Home.tsx 中添加以下代码：

import React from "react";

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;

在 About.tsx 中添加以下代码：

import React from "react";

const About = () => {
  return (
    <div>
      <h1>About</h1>
    </div>
  );
};

export default About;

配置路由

现在是时候让我们的页面动起来了。在 src 文件夹中创建 App.tsx，并添加以下代码：

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import Home from "./pages/Home";
import About from "./pages/About";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

export default App;

使用 useHistory 导航

现在我们可以使用 useHistory 钩子轻松地在页面之间导航。例如，在 Home.tsx 中添加以下代码：

import React from "react";
import { useHistory } from "react-router-dom";

const Home = () => {
  const history = useHistory();

  const handleClick = () => {
    history.push("/about");
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
};

export default Home;

结论

太棒了！你已经掌握了 TypeScript 中 React 路由的基础知识。现在你可以开始构建自己的令人惊叹的单页面应用程序了。

常见问题解答

1. 为什么需要 React 路由？
   React 路由允许你在同一应用程序中创建多页应用程序，而无需刷新页面。

2. useHistory 和 useParams 有什么区别？
   useHistory 用于导航到其他页面，而 useParams 用于获取当前页面的参数。

3. 如何使用动态路由？
   使用占位符（例如 :id）在路由中创建动态路径，并使用 useParams 访问它们。

4. 如何保护路由？
   使用 React 路由提供的内置保护机制，例如 requireAuth 或第三方库，如 react-router-protected-routes。

5. 如何实现嵌套路由？
   在嵌套的 Switch 组件中使用 <Route> 组件创建嵌套路由。