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.參數名]來獲取。
英文官網案例：