12-React 路由与项目实践

React Router 是 React.js 中用于处理路由的库，它是 React.js 应用开发中必不可少的一部分。React Router 提供了多种方式来实现路由，其中最常用的是 React Router DOM。在 React Router DOM 中，路由是通过组件进行配置和定义的，而不是通过 URL 字符串。在这篇笔记中，我们将讨论 React Router 的基础知识，包括路由、history 和项目实践。

React Router DOM 路由

React Router DOM 是 React Router 的一种实现方式，它提供了三种常用的路由组件：

BrowserRouter：使用 HTML5 的 history API 实现路由，比 HashRouter 更加优雅，但需要服务器支持。
HashRouter：使用 URL 的 hash 值实现路由，不需要服务器支持，但 URL 显得比较丑陋。
MemoryRouter：路由只存在于内存中，常用于测试和服务器端渲染。

React Router 路由

在 React.js 项目中，React Router 的使用通常可以分为以下几个步骤：

安装和引入 React Router

使用 npm 或 yarn 安装 React Router 库后，可以在项目中引入需要的组件。React Router 通常由以下几个组件构成：
- BrowserRouter：用于包装整个应用程序，使得所有的路由规则生效。
- Route：用于定义一个路由规则，指定该路由规则对应的组件。
- Link：用于定义一个链接，点击该链接可以跳转到指定的路由。
- Switch：用于封装 Route 组件，当多个路由规则匹配时，只渲染第一个匹配的组件。

定义路由规则

在 React.js 中，可以通过定义 Route 组件来定义路由规则。每个 Route 组件需要指定 path 和 component 两个属性，分别表示该路由规则匹配的 URL 和对应的组件。

例如，下面的代码定义了两个路由规则，当用户访问 /home 或 /about 时，分别渲染对应的 Home 组件和 About 组件。

phpCopy code<Switch>
  <Route path="/home" component={Home} />
  <Route path="/about" component={About} />
</Switch>

定义链接和跳转在 React.js 中，可以通过定义 Link 组件来定义链接。每个 Link 组件需要指定 to 属性，表示该链接跳转的 URL。

例如，下面的代码定义了两个链接，分别跳转到 /home 和 /about。

phpCopy code<Link to="/home">Home</Link>
<Link to="/about">About</Link>

在用户点击链接时，React Router 会自动根据路由规则进行匹配，然后渲染对应的组件。

编写路由组件

在 React.js 中，可以通过定义 React 组件来实现具体的页面功能。例如，下面的代码定义了一个 Home 组件，用于展示首页内容。

javascriptCopy codeimport React from 'react';

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page!</p>
    </div>
  );
}

export default Home;

[第12课-React 路由与项目实践(1)|青训营笔记]

12-React 路由与项目实践

React Router DOM 路由

React Router 路由