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 class Baokuo extends React.Component{
10
11     render(){
12
13         return (
14                 // 根容器
15                 <HashRouter>
16                 <div>
17                     <h1>这是根目录</h1>
18                     <hr/>
19                     {/* 链接 */}
20                    <Link to="/home">首页</Link>&nbsp;&nbsp;
21                    <Link to="/text">新闻</Link>&nbsp;&nbsp;
22                    <Link to="/hellow">关于我们</Link>
23                     <hr/>
24                     {/* 路由规则，Route是配置路由的规则，同时也是一个占位符 */}
25                     <Route path="/home" component={Home} />
26                     <hr/>
27                     <Route path="/text"  component={Text}></Route>
28                     <hr/>
29                     <Route path="/hellow" component={Hellow}></Route>
30                 </div>
31                 {/* <DatePicker></DatePicker><Button type="primary" icon="twitter">点击</Button> */}
32                 </HashRouter>
33         );
34     }
35 }
36
37 export default Baokuo;

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

5、嵌套路由

详细可见https://blog.csdn.net/xiaodi520520/article/details/93336215 讲解的比较清楚

5.1、嵌套路由的步骤

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

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

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

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

原文地址：https://www.cnblogs.com/haiyang-/p/12096802.html