React路由學習 五

這裡主要是根據之前的**，實現乙個自定義導航，我們可以，選中的導航新增class，

import react from 'react';

import from '../react-router-dom'
// 渲染route有三種方式
// component
// render
// children
export default () => 
exact=
children=) => >
to=>link>
li>)
}} />
// return 
to=>link>
li>
}

這裡解析children判斷，是否需要處理，因為存在children屬性的話，必須是要渲染的，至於需要需要新增執行的類，這需要在menulink元件內部做處理

import react,  from 'react';

import from './context'
let pathtoreg = require('path-to-regexp')
export default
class route extends component} = value // 拿到hash 進行比較
// 拿到傳入的path，元件，並手動大寫(元件需要首字母大寫)
// 結構出來render方法，配合控制許可權
// 解構拿到children，存在該屬性，說明是乙個自定義選單元件，直接渲染就可以了，不需要做處理
let = this.props
let keys = 
// 解析出來引數，然後傳給子元件，子元件就可以繼續匹配
let reg = pathtoreg(path, keys, )
let result = path.match(reg)
let props = 
// 判斷是否有其他引數
if (result) , {})
let match = 
props.match = match
}// 使用reg處理路由
if (reg.test(pathname)) >
component>
} else if(render) else if (children) 
return null
} else 
return null}}
}consumer>)}
}

// 常規引入元件

import menulink from './components/menulink'
// 使用元件
"/" label='home'>menulink>
to="/user"
label='user'>
menulink>
to="/profile"
label='profile'>
menulink>

通過該元件，我們可以在元件內部使用this.loaction.history.push進行路由跳轉,

實現思路很簡單，就是我們寫乙個函式元件，在這個元件內部接受乙個引數，需要處理this執行的commponent元件，然後引入route，返回乙個函式，函式裡是route， comment就是我們接收到的引數,**如下：

// withroute元件**

import react, from 'react';
import from '../react-router-dom'
export default (component) => () => /> 
}// 使用元件
// 我們在自己寫的元件內部引用這個元件，然後呼叫並倒出，**如下
// 這裡是自己自定義乙個header元件
import react, from 'react';
import from '../react-router-dom'
class header extends component}>管理系統a>
h3>)
}}export default withrouter(header)

route每次渲染都會查詢所有的模板，為了減少資源浪費，我們需要乙個元件，做乙個處理，route匹配到指定的模板以後，不在繼續查詢。

實現思路：

使用上下文物件，拿到所有路由引數

結構得到pathname，children所有元件

遍歷所有子元件，拿到子元件的path，然後使用path-to-regexp元件建立乙個正則去匹配，匹配成功以後直接返回，不在繼續遍歷

import react,  from 'react';

import from './context';
let pathtoreg = require('path-to-regexp')
/** * 類似於js switch功能
* 匹配到指定的外掛程式以後，就不再繼續匹配路由
*/export default
class switch extends component} = value
let children = this.props.children
for (let i = 0; i < children.length; i++) = child.props
letreg = pathtoreg(path, , )
// 使用正則匹配當前位址列的路徑, 如果相同，則渲染，不繼續執行判斷
// console.log(i, 'i')
if(reg.test(pathname)) 
}// 如果**執行結束還是沒有找到對應的模板，則直接返回null
return
null
}}consumer>)
}}

// 使用之前我們需要在react-router-dom目錄的index引入，並匯出

// 我們在使用的頁面引用該元件直接引入，如下使用就可以了
// 我們只需要使用switch元件包裹所有的路由元件就可以了
path="/"
exact
component= />
path="/user"
component=/>
path="/login"
component=/>
path="/profile"
component=/>
to="/">
redirect>
switch>

**很簡單，也很少，主要是鍛鍊我們處理children，熟練使用元件的三種渲染方式： component，render ，children，讓我們能夠知道更多的使用方式，方便在專案中可以靈活地處理遇到的問題和場景

react學習六 react路由

react router 安裝包yarn add react router dom匯入路由模組 import reactdom from react dom route 表示乙個路由規則，在 route 上，有兩個比較重要的屬性，path component link 表示乙個路由的鏈結 就好比 v...

React路由學習 四

實現思路 1.我們拓展之前寫好的route元件，讓其支援render方法 2.在重定向的時候儲存之前的狀態，並傳遞給下乙個元件 3.新建元件 protected 因為該元件不需要自己的私有狀態，這裡function 4.引入route元件，並在protected返回route元件，具體渲染還是使用r...

react 路由Redirect元件學習

switch 是route 從上到下匹配，如果有乙個匹配，後面的就不會再繼續匹配了 redirectfrom屬性是位址與from匹配 可以用正則 才會重定向到to屬性指定的路徑 redirectfrom屬性如果沒有，則預設是匹配所有的路徑 import react,from react import...