反应路由器安装 - Javascript

介绍

React Router是一个基于React的、用于建立单页面Web应用的路由库。它提供了一组组件，可以帮助我们在React应用中定义路由，使得不同的URL能够显示不同的组件。

React Router提供了多种不同的路由方式，包括BrowserRouter、HashRouter、MemoryRouter等。本文将介绍如何使用BrowserRouter来建立路由，并集成到React应用中。

安装

在使用React Router之前，需要先安装它。你可以使用npm或yarn来安装React Router，如下所示：

npm install react-router-dom
# 或
yarn add react-router-dom

使用

使用React Router建立路由需要两部分：定义路由和使用路由。

定义路由

React Router提供了一些组件来定义路由，包括Route、Switch、BrowserRouter、Link等。

在React应用的根组件中，通过使用BrowserRouter组件来定义路由。例如：

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

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

上面的代码中，我们通过BrowserRouter组件来包裹所有路由。Switch组件用于选择一个匹配的Route，并且只渲染匹配的组件。Route组件则是用于定义具体的路由。

在上面的代码中，我们定义了三个路由，分别是：

• '/'
• '/about'
• '/contact'

当用户访问这些URL时，React会显示相应的组件。

使用路由

在定义好路由后，我们需要在组件中使用它们。React Router提供了Link组件，用于在应用中导航。

例如：

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

上面的代码中，我们在Navbar组件中使用了Link组件，用于导航到不同的路由。

当用户点击Link时，React会自动渲染对应的组件。