使用纱线安装反应路由器 dom - Shell-Bash

简介

在本篇文章中，我们将介绍使用纱线（Yarn）来安装反应路由器 dom。反应路由器 dom（React Router DOM）是 React 公共路由器，它允许我们通过网页 URL 来管理 React 组件之间的导航。使用 React Router DOM，可以让我们的 React 应用程序变得简单且易于管理。

步骤

步骤 1：安装纱线

若您尚未在计算机上安装纱线，则需要先通过以下命令来安装纱线。

npm install -g yarn

步骤 2：使用纱线安装反应路由器 dom

现在，使用以下命令在您的 React 项目中添加反应路由器 dom。

yarn add react-router-dom

步骤 3：添加反应路由器 dom 组件

现在，您已经成功地将反应路由器 dom 安装到您的 React 项目中。接下来，您可以添加反应路由器 dom 组件到您的 React 项目中，以便进行导航。

以下是一个示例反应路由器 dom 组件，其中包含两个路由，用于将用户从主页导航到“关于”页面。

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">主页</Link>
            </li>
            <li>
              <Link to="/about">关于</Link>
            </li>
          </ul>
        </nav>

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

function Home() {
  return <h2>欢迎来到主页</h2>;
}

function About() {
  return <h2>这是关于页面</h2>;
}

export default App;

结论

使用纱线轻松地安装反应路由器 dom，并使用它来管理您的 React 组件之间的导航。希望本篇文章能够帮助到您。