@React路由之路

在React中學會使用路由

學習最容易給的疑惑是： 我看懂了，可是寫不出來。

1. 理解路由組件
2. 如何使用路由
3. 動態路由加載組件

問題

咱們如何向 vue-router 同樣可以設置一個路由的配置項的東西，來簡化開發流程。 這是可行的嗎？

第一步

react-router-dom 包向外面暴露的組件有：

• BrowserRouter
• HashRouter
• Link
• NavLink

其次 依賴於 react-router 包，它向外暴露的包：

• MemoryRouter
• Prompt
• Redirect
• Route
• Router
• StaticRouter
• Switch
• __RouterContext
• generatePath
• matchPath
• useHistroy， // 獲取如今的 histroy 對象， hook 方便咱們使用
• useLocation，// 獲取如今location的對象， hook 方便咱們使用
• useParams, 使用動態路由的時候，咱們要寫參數/cards/:id， hook 方便咱們使用
• useRouteMatch // 獲取 route 的匹配對象， hook 方便咱們使用
• withRouter

在新版本中，咱們大量的使用的 hooks 來簡化咱們的開發，這項目裏面大量的使用了，鉤子函數，鉤子函數的複用，使得代碼變的更加簡潔。

React 路由

React 嵌套路由

經過一級路由匹配到組件，組件點擊以後是匹配的另外一個組件，這裏面是嵌套路由的配置和組件的內容。

這裏有一個api: useRouteMatch 來匹配內容當前的 path 和 url

React 路由重定向

咱們經過 React 路由的充電向到其餘的路由，經常使用設定不一樣的權限使用重定向功能

自定義 Link 組件

在 React 當中一切是組件，因此在React當中，組件是比 React 更加靈活的，大師 React 對 JS 的要求相對就高了的不少，其次還有項目的性能優化。

自定義 Link 就是控制 Link 展現的內容，能夠添加css, 來控制樣式

阻止過渡

咱們填寫表單的時候，可能會遇到表單沒喲提交什麼以內，而後將想路由跳轉，跳轉以前作一些提示的話，咱們應該阻止這些過渡行爲。

<Prompt
    when={isBlocking}
    message={location =>
        `Are you sure you want to go to ${location.pathname}`
    }
    />
複製代碼

404 Not Match

let location = useLocation();
複製代碼

跟Vue中同樣沒有匹配到的時候，咱們 * 來匹配

路由簡單的映射

Route 組件

React 中一塊兒皆是組件，全部的都是組件

Route 組件就是在路由發生跳轉的時候，匹配時的組件，Route 組件的屬性：

• render 方法

• props props 屬性

• component 渲染組件

• render function 渲染內聯組件

• children function 選人孩子組件，props.child 內部的屬性，將 Route 組件和 prop.chidlren 合二爲一。

• path 路徑

• exact 精確的

• strict 嚴格的

• location 對象

• sensitive 大小寫敏感的

// config.js
const config = [
    {
        path: '/',
        exact: true,
        name: '主頁'，
        component: Index,
        icon: 'index',
        meta: {
            isAuth: true,
            
        }
    }，
    {
        path: '/login',
        exact: true,
        name: '主頁'，
        component: Index,
        icon: 'index',
        meta: {
            isAuth: true,
            
        }
    }
]
複製代碼

咱們須要將這個數組映射成，咱們須要的單頁面的應用的路由模式，可是不可能手寫，因而咱們能夠聽從這數據結構（設計就是 Route 組件的屬性）

import React from 'react'
import { config } from './config';
import { Route } from 'react-router-dom'

// React 函數組件 RenderRoute，return 的是咱們要渲染的函數
export const RenderRoute = () => {
  return config.map((route, index) => 
    <Route path={route.path} exact={route.exact} key={route.path} component={route.component}></Route>
  )
}

複製代碼

這是簡單的配置文件到組件的映射問題，而後咱們考慮的問題

• 少不了嵌套組件的實現
• 少不了重定向
• 少不了受權管理
• 動態組件的方法
• 路由配置中國須要配合的 icons 和 routes 和 name 一些業務須要的東西。

參考

1. reacttraining.com/react-route…