react路由安装与使用

React Router 是一个流行的 React 应用程序的路由库。它可以帮助你管理你的应用程序的不同页面之间的导航，从而使你的应用程序更加模块化和易于维护。

安装 React Router：

你可以使用 npm 或 yarn 来安装 React Router。

使用 npm：

npm install react-router-dom

使用 yarn：

yarn add react-router-dom

使用 React Router：

下面是一个简单的例子，展示了如何使用 React Router 在两个页面之间进行导航。

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

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

在这个例子中，我们定义了两个组件：Home 和 About。我们使用 Link 组件来创建两个链接，一个指向 Home 组件，另一个指向 About 组件。当用户点击这些链接时，React Router 会根据链接的路径来渲染相应的组件。我们使用 Switch 组件来包装 Route 组件，Switch 组件会在找到第一个匹配的 Route 组件后停止查找。这样可以确保我们只渲染一个组件。