目录

React Router 的使用

OrionPax

2019-07-23 2025-02-12 约 403 字预计阅读 1 分钟

https://raw.githubusercontent.com/orionpax1997/picx-images-hosting/master/Development/react-router-banner.p571qwyx0ds.webp

目录

1 简介

React Router 是完整的 React 路由解决方案。React Router 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。

2 为什么需要路由？

单页应用许需要进行页面的切换
通过 URL 可以定位到页面
更有语义的组织资源

3 基础

3.1 三种路由实现方式

URL 路径
hash 路由
内存路由

3.2 API

<Link> : 普通的链接，不会触发浏览器刷新。to : 跳转链接的路径，如 /users/123。
<Redirect> : 重定向当前页面，例如：登录判断。

<Route> : 路径匹配时显示对应组件。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


const routes = (
  <Route component={App}>
    <Route path="groups" component={Groups} />
    <Route path="users" component={Users} />
  </Route>
);

class App extends React.Component {
  render() {
    return (
      <div>
        {/* 这会是 <Users> 或 <Groups> */}
        {this.props.children}
      </div>
    );
  }
}

path : URL 中的路径。它会组合父 route 的路径，除非它是从 / 开始的，将它变成一个绝对路径。
components : 当匹配到 URL 时，单个的组件会被渲染。它可以被父 route 组件的 this.props.children 渲染。

<Switch> : 只显示第一个匹配的路由

4 React Router 特性

声明式路由定义。页面任意地方可以定义路由通过 URL 加载组件。
动态路由。页面解析时，才解析路由。