react进入路由前获取数据_React中路由的基本使用

1、React路由介绍

现在我们来搞一搞React中的路由吧，别问我为什么这木喜欢用搞这个字，因为它比较深奥。

注意下面我们使用的是React-Router-DOM

React中的路由基本使用还是满简单的，零碎的小东西有点多，所以我直接把他们揉到一起做了一个小例子，代码我都写上注释了，应该挺简单易懂的

注意：以下所有操作均运行在搭好的React环境中

2、安装react-router-dom

在项目命令行中，执行cnpm install react-router-dom -S下载到生产环境的依赖中。

在组件中通过对象的解构方式去获取到react-router-dom内置组件，在     组件中，按需引入内置组件，在页面中进行使用：

3、关于组件的区别

HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；

Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component

Link则表示一个路由的链接

4、仿照官网来个小案例(声明式路由)

4.1、创建一个新的Baokuo.js文件，并在index.js中导入这个路由文件

4.2、创建好要跳转的页面

4.3、在Baokuo.js文件中粘贴官方的第一个路由案例;

1 import React from 'react'

2 import Home from './penter/Home' //因为在一个文件夹下面创建的，所以要找到准确位置。

3 import Text from './penter/Text'

4 import Hellow from './penter/Hellow'

5 import {BrowserRouter,HashRouter,Route,Link} from 'react-router-dom'

6 import {Button,DatePicker,Icon} from 'antd';7 import 'antd/dist/antd.css'

8

9 classBaokuo extends React.Component{10

11 render(){12

13 return(14 //根容器

15

16

17

这是根目录

18

---

19 {/*链接*/}20 首页  21 新闻  22 关于我们

23

---

24 {/*路由规则，Route是配置路由的规则，同时也是一个占位符*/}25

26

---

27

28

---

29

30

31 {/*点击*/}32

33 );34 }35 }36

37 export default Baokuo;

1 总体的步骤分为三步:2 配置路由的容器Router;3 配置路由的连接LInk;4 配置路由填充的位置以及路径和组件的映射关系;:

5、嵌套路由

5.1、嵌套路由的步骤

a.在父路由的组件中配置子路由;

b.子路由中同样需要配置Link和Route;

6、带参数路由和获取参数；

方式:在路由的路径中通过[:参数名称]来进行传递,改参数在路由匹配的组件中通过[match.params.参数名]来获取。

英文官网案例：