React路由快速入门：Class组件和函数式组件的使用

1. 介绍

在开始学习React路由之前，先了解一下什么是React路由。React Router是一个为React应用程序提供服务器托管声明式路由的库。它可以帮助您在应用程序中管理不同的URL，并在这些URL上呈现相应的组件。

2. 安装

要在React应用程序中使用React路由，您需要安装以下两个包：

• react-router-dom
• react-router

您可以使用npm或yarn将其添加到项目中：

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

3. 使用Class组件

在使用React路由之前，首先要导入所需的组件：

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

接下来，我们将创建一些基本的组件，以展示如何使用React路由：

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return (
      div>
        h1>Home/h1>
      /div>
    );
  }
}

class About extends Component {
  render() {
    return (
      div>
        h1>About/h1>
      /div>
    );
  }
}

class Contact extends Component {
  render() {
    return (
      div>
        h1>Contact/h1>
      /div>
    );
  }
}

现在，我们将在主应用程序组件中设置路由：

class App extends Component {
  render() {
    return (
      Router>
        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>
      /Router>
    );
  }
}

在上面的示例中，我们使用BrowserRouter组件在应用程序中创建了一个新路由。Link组件用于在应用程序中导航，而无需刷新页面。Route组件用于在特定URL上呈现组件。Switch组件确保仅渲染与当前URL匹配的第一个Route。

4. 使用函数式组件

在使用React路由与函数式组件时，首先要导入所需的组件和钩子：

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

接下来，我们将创建一些基本的函数式组件：

const Home = () => {
  return (
    div>
      h1>Home/h1>
    /div>
  );
};

const About = () => {
  return (
    div>
      h1>About/h1>
    /div>
  );
};

const Contact = () => {
  return (
    div>
      h1>Contact/h1>
    /div>
  );
};

现在，我们将在主应用程序组件中设置路由：

const App = () => {
  return (
    Router>
      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>
    /Router>
  );
};

在上面的示例中，我们使用函数式组件实现了与Class组件相同的功能。

5. 总结

我们探讨了如何使用Class组件和函数式组件来设置路由。通过掌握React路由的基础知识，您可以轻松地为自己的React应用程序创建复杂的导航系统。更多的学习资料可参考：

React Router 中文文档：https://react-guide.github.io/react-router-cn/index.html
React Router 教程: https://www.freecodecamp.org/news/react-router-in-5-minutes/
React 服务器托管Router官方文档: https://reactrouter.com/

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 实现节流防止连点方法以及调用方式

1、新建throttle.js文件，复制该代码 export function throttle(fn, delay) { let latestTime = 0 return function() { const _this = this const _arg…