空境界

react-router中提供的組件都要在HashRouter包裹的範圍內使用

HashRouter：路由機制的管控
1.當前項目一旦使用HashRouter，則默認在頁面的地址後面加上「#」，也就是Hash默認值「/」，一般顯示首頁
2.HashRouter只能有一個組件
3.HashRouter裡面，需要根據hash地址的不同，展示組件的內容，使用Route

Route
1.path：
（1）設置匹配地址，但不是嚴格匹配，只要包含「/」，都可以被匹配上
     path='/'，只要匹配的地只有「/」都可以被匹配上
     #/user/login ==> /、/user
     #/user2 ==> /

（2）使用 exact 來嚴格匹配，hash值和url的值都相同才可以匹配到
     #/user/login ==> /，/user不再匹配
     #/user2 ==> /

2. component：一旦hash值和當前Route的path相同，則渲染component指定的組件

3.render：如果地址匹配，會把render規劃的方法執行，在方法中一般叫做權限較驗，即渲染組件前驗證是否存在權限，不存在會做特殊處理

Redirect：重定向
 to[string]='重定向的地址'
 to[object]=重定向的地址，有更多的信息
    {
        pathname:定向的地址
        search:給定向的地址問號傳參
        state:給定向後的組件傳遞一些信息
    }

ex:
Redirect to='/?lx=404'/
<Redirect to={{
                pathname: '/',
                search: '?lx=404'
            }} />
            
            
Link：
使用：<Link to='地址'></Link>

Link是react-router-dom提供的路由切換組件，可以實現點擊時路由的切換
 to[string]='跳轉到指定的地址'
 to[object]=跳轉到指定的地址，有更多的信息
    {
    pathname:跳轉到指定的地址
    search:給跳轉到指定的地址問號傳參
    state:基於某些方式傳遞信息
    }
replace: false，是替換history stack中當前的地址，是一個追加信息的地址

NavLink：
使用：<NavLink to='地址'></Link>
NavLink：和Link類似，NavLink在當前頁面的hash值和地址匹配的時候，會默認給組件加上active樣式，讓其有選中的狀態
有to、replace、exact等屬性，用法相同
isActive：匹配後執行對應的樣式

withRouter：把一個非受路由管控的組件、模擬成為受路由管控的組件

<Route path='/' component={組件}/>
export default withRouter(connect()(組件));

受路由管控的組件特點：
1.只有當前頁面的hash地址（/#/...）和指定的地址匹配，才會渲染對應的組件
withRouter是沒有匹配地址，但可以被模擬成為受路由管控

2.路由切換的原理：
匹配的路由，會把對應的組件內容重新渲染，不匹配的路由，會把對應的組件內容移除，下次匹配時再重新渲染
每次路由的切換，不是替換現有的地址，就是增加一條新的信息地址，但不管怎樣，都會立刻切換到新地址

3. 受路由管控的組件，在組件的props上都會默認添加3個屬性
（1）history：
    -- push：加push是產生一條新紀錄，達到切換到指定路由
    this.props.history.push('/地址')
    -- go：跳轉到指定的地址（傳的是數字：0當前，-1上一個）
    -- goBack：回退到上一個地址
    -- goForward：向前走一個地址

（2）location：可以獲得當前hash路由渲染組件的信息
    -- pathname：當前hash路由地址
    -- search：當前頁面的問號傳參
    -- state：基於Link、NavLink、Redirect中的to，傳遞的是一個對象，對象中的state可以在location中取到

（3）match：獲取的是當前路由匹配的一些結果
    params: 獲取當前路由地址傳參的值
    path: "/"
    

在spa路由管理的項目中，從列表跳轉到詳情，需要傳遞一些信息給詳情，以此來展示不同的信息
傳遞信息到詳情頁面的方式：
1.問號傳參
2.url地址傳參：把參數當成地址的一部分
  -- path='/customer/detail:id'