如何在类组件中使用 react-router

React Router 是 React 生态系统中最受欢迎的路由管理库，它提供了强大的功能，方便开发者在 React 应用中实现复杂的路由逻辑。

Router 可以用在函数组件中，也可以用在类组件中。本文主要介绍如何在类组件中使用 React Router。

安装 react-router-dom

使用 React Router 之前，需要先安装 react-router-dom：

npm install --save react-router-dom

导入必要的组件

在类组件中使用 React Router，需要导入以下组件：

• BrowserRouter：该组件可以将路由容器包裹在 HashRouter 中，接收浏览器中的 history 实例作为 prop，因此可以使用 history API 来与浏览器的地址栏交互。

• Switch：渲染与路径匹配的第一个子路由，并且只会渲染一个子路由组件。

• Route：定义一条路由规则，指定 path 属性和一个渲染组件或组件元素。

• Link：一个指向应用程序内部路由的超链接标签。

导入方式：

import { BrowserRouter, Switch, Route, Link } from 'react-router-dom'

使用 Router 组件

在类组件中使用 Router 组件需要嵌套 BrowserRouter 组件、Switch 组件和 Route 组件。具体实现请看下面的代码片段：

import React from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </BrowserRouter>
    )
  }
}

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Contact = () => (
  <div>
    <h2>Contact</h2>
  </div>
)

在上面的例子中，BrowserRouter 组件是整个路由容器，它包裹了所有的路由信息。Switch 组件是路由匹配器，它只会渲染与当前 URL 匹配的第一个路由，避免了多次渲染的问题。Route 组件作为路由信息的组件，它接收 path 属性和 component 属性，来决定哪个组件渲染。

通过 Link 组件跳转路由

使用 Link 组件，可以在应用程序中的不同路由之间导航。Link 组件可以使用 to 属性来链接到一个页面的指定路由。

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

class App extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/about">About</Link>
              </li>
              <li>
                <Link to="/contact">Contact</Link>
              </li>
            </ul>
          </nav>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Contact = () => (
  <div>
    <h2>Contact</h2>
  </div>
)

在上面的例子中，Link 组件的 to 属性被设置为要跳转的页面的路由。当用户点击该链接时，应用程序将引导用户到相应的 URL（路由）。

总结

以上是在类组件中使用 React Router 的基本方法。React Router 提供了更多的 API，如 Redirect、Prompt、BrowserRouter 等，可以根据具体需求进行使用。另外，React Hook 也提供了一些与 React Router 相关的 Hooks，如 useHistory、useLocation、useParams 等。这些 Hooks 可以方便地获取当前路由、参数等信息，从而实现更加高级的路由管理。