React-router 路由的核心思想以及实现方式

2023-12-08 22:55:24

什么是路由

路由，英文名 Routing，是一种将请求映射到服务器上相应处理程序的方法。在前端开发中，路由是指将不同的 URL 映射到不同的组件或页面。当用户访问不同的 URL 时，路由器会根据配置好的路由规则将请求分发到相应的组件或页面。

2. React-router 简介

React-router 是一个用于构建单页面应用程序的路由库，它与 React 完美集成，提供了简单而强大的路由功能。React-router 允许你定义一系列路由，每个路由都对应一个组件或页面。当用户访问不同的 URL 时，React-router 会根据你定义的路由规则将请求分发到相应的组件或页面。

3. React-router 实现原理

React-router 的实现原理并不复杂，它主要依靠 history API 来实现路由功能。history API 是浏览器提供的一套用于操作浏览器历史记录的接口，它允许你获取当前的 URL、前进或后退、以及监听 URL 的变化。

React-router 通过监听 URL 的变化来实现路由功能。当 URL 发生变化时，React-router 会根据你定义的路由规则将请求分发到相应的组件或页面。

4. 最小可用的 react-router 实现

为了更好地理解 React-router 的实现原理，我们不妨自己动手实现一个最小可用的 React-router。

首先，我们需要安装一些必要的依赖库：

npm install react-router-dom

然后，我们需要创建一个新的 React 项目：

npx create-react-app my-app

项目创建完成后，我们需要在 src 目录下创建一个新的文件，名为 Router.js。在 Router.js 文件中，我们将编写我们自己的路由器：

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

const Router = () => {
  return (
    <BrowserRouter>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </BrowserRouter>
  );
};

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

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

export default Router;

在上面的代码中，我们首先导入必要的依赖库。然后，我们定义了一个名为 Router 的函数组件，这个组件将作为我们的路由器。

在 Router 组件中，我们使用 BrowserRouter 组件来创建一个 BrowserRouter 实例。BrowserRouter 是 React-router 提供的用于管理浏览器历史记录的组件。

在 BrowserRouter 组件中，我们定义了两个 Link 组件和两个 Route 组件。Link 组件用于创建指向其他页面的链接，而 Route 组件用于定义路由规则。

在上面的代码中，我们定义了两个路由规则：

当 URL 为 / 时，渲染 Home 组件。
当 URL 为 /about 时，渲染 About 组件。

最后，我们在 index.js 文件中导入 Router 组件并将其渲染到根元素中：

import React from "react";
import ReactDOM from "react-dom";
import Router from "./Router";

ReactDOM.render(<Router />, document.getElementById("root"));