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文件中粘贴官方的第一个路由案例;

import React from 'react'
import Home from './penter/Home'   //因为在一个文件夹下面创建的，所以要找到准确位置。
import Text from './penter/Text'
import Hellow from './penter/Hellow'
import {BrowserRouter,HashRouter,Route,Link} from 'react-router-dom'
import {Button,DatePicker,Icon} from 'antd';
import 'antd/dist/antd.css'

class Baokuo extends React.Component{

    render(){
       
        return (
                // 根容器
                <HashRouter>
                <div>
                    <h1>这是根目录</h1>
                    <hr/>
                    {/* 链接 */}
                   <Link to="/home">首页</Link>&nbsp;&nbsp;
                   <Link to="/text">新闻</Link>&nbsp;&nbsp;
                   <Link to="/hellow">关于我们</Link>
                    <hr/>
                    {/* 路由规则，Route是配置路由的规则，同时也是一个占位符 */}
                    <Route path="/home" component={Home} /> 
                    <hr/>
                    <Route path="/text"  component={Text}></Route>
                    <hr/>
                    <Route path="/hellow" component={Hellow}></Route>
                </div>
                {/* <DatePicker></DatePicker><Button type="primary" icon="twitter">点击</Button> */}
                </HashRouter>
        );
    }
}

export default Baokuo;

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

5、嵌套路由

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

  5.1、嵌套路由的步骤

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

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

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

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