React Router教程
React项目的可用的路由库是React-Router
,当然这也是官方支持的。它也分为:
- react-router 核心组件
- react-router-dom 应用于浏览器端的路由库(单独使用包含了react-router的核心部分)
- react-router-native 应用于native端的路由
以下教程我们都以Web端为主,所以所有的教程内容都是默认关于
react-router-dom
的介绍。
进行网站(将会运行在浏览器环境中)构建,我们应当安装react-router-dom
。react-router-dom
暴露出react-router
中暴露的对象与方法,因此你只需要安装并引用react-router-dom
即可。
官方文档地址: https://reacttraining.com/react-router/web/guides/philosophy
Installation | 安装
安装:
yarn add react-router-dom
# 或者,不使用 yarn
npm install react-router-dom
路由的基本概念
现在的React Router版本中已不需要路由配置,现在一切皆组件。
ReactRouter中提供了以下三大组件:
- Router是所有路由组件共用的底层接口组件,它是路由规则制定的最外层的容器。
- Route路由规则匹配,并显示当前的规则对应的组件。
- Link路由跳转的组件
当然每个组件下又会有几种不同的子类组件实现。比如: Router组件就针对不同功能和平台对应用:
-
<BrowserRouter>
浏览器的路由组件 -
<HashRouter>
URL格式为Hash路由组件 -
<MemoryRouter>
内存路由组件 -
<NativeRouter>
Native的路由组件 -
<StaticRouter>
地址不改变的静态路由组件
三大组件使用的关系:
image
如果说我们的应用程序是一座小城的话,那么Route就是一座座带有门牌号的建筑物,而Link就代表了到某个建筑物的路线。有了路线和目的地,那么就缺一位老司机了,没错Router就是这个老司机。