反应路由器安装 - TypeScript

React Router 是一个用于 React 应用程序的强大的路由库。它可以帮助您在 React 应用程序中管理导航和状态。

在这篇文章中，我们将介绍如何在 TypeScript 中安装和使用 React Router。

步骤一：安装 React Router

在您的项目中安装 React Router 最简单的方法是使用 npm。

打开一个命令行界面（比如终端），在项目文件夹下执行以下命令：

npm install react-router-dom

这会将 react-router-dom 包及其所有依赖项下载到您的项目中。

步骤二：添加路由

现在您已经安装了 React Router，让我们来添加一些路由。对于这个例子，我们将创建一个简单的应用程序，有两个页面：主页和文章页面。

创建路由组件

首先，让我们创建一个新文件夹 routes，在里面创建两个新组件：Home 和 Articles。这些组件将是我们在 React Router 路由中定义的路由组件。

// routes/Home.tsx

import React from 'react';

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

export default Home;

// routes/Articles.tsx

import React from 'react';

const Articles = () => {
  return <h2>Articles</h2>;
};

export default Articles;

在路由组件中添加路由

现在，在 App.tsx 中添加路由。首先，导入您的新组件：

import Home from './routes/Home';
import Articles from './routes/Articles';

然后，包装您的组件在路由和 Switch 组件内：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// ...
<Router>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/articles" component={Articles} />
  </Switch>
</Router>

这个路由配置意味着如果用户访问主页，他们会看到 Home 组件，如果他们访问 articles 路径，他们会看到 Articles 组件。

步骤三：导航

现在您的路由已经设置好了，让我们添加一些导航到您的应用程序。

在您的 App.tsx 中，添加链接到您的路由：

import { Link } from 'react-router-dom';
// ...
<header>
  <nav>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/articles">Articles</Link>
      </li>
    </ul>
  </nav>
</header>

这样就可以创建一个包含两个链接的基本导航栏，让用户能够通过单击链接在您的应用程序中导航。

结论

现在您已经安装和配置了 React Router，并且已经添加了一些路由和导航到您的应用程序中。

这只是 React Router 的基础知识，您可以在官方文档中找到更多详细信息，了解如何使用它来解决更复杂的路由需求。