React路由學習 四

實現思路：

1.我們拓展之前寫好的route元件，讓其支援render方法

2.在重定向的時候儲存之前的狀態，並傳遞給下乙個元件

3.新建元件(protected),因為該元件不需要自己的私有狀態，這裡function

4.引入route元件，並在protected返回route元件，具體渲染還是使用route元件

5.我們在元件（route）內部拿到protected元件穿過來的引數，然後在render方法做判斷，如果條件滿足，則渲染頁面，不滿足則重定向到指定頁面，具體實現在**在下邊

import react,  from 'react';

import from './context'
let pathtoreg = require('path-to-regexp')
export default
class route extends component} = value // 拿到hash 進行比較
// 拿到傳入的path，元件，並手動大寫(元件需要首字母大寫)
// 結構出來render方法，配合控制許可權
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 react from 'react';
import from '../react-router-dom';
// import from 'react-router-dom';
// 用類的宣告方式比較冗餘，遂使用函式式元件
// export default class protected extends component
// }
// 表示將component結構賦值給component，其他的引數賦值給rest
export default
function
() render=}} >
redirect>)
}}/>
// localstorage.getitem('logined') ? 
component>
)}

在index檔案中把protected元件匯出，方便我們引用

import hashrouter from './hashrouter'

import route from './router'
import link from './link'
import browserrouter from './browserrouter'
import switch from './switch'
import redirect from './redirect'
//import protected from './protected'
// 受保護的路有許可權
export

使用protected元件

// 引用元件

import from './react-router-dom'
// 使用元件
"/profile" component=/>

**其實很簡單。執行的思路大致如下，沒有特別高深的 ，就是需要簡單的理解一下

react學習六 react路由

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

React路由學習 五

這裡主要是根據之前的 實現乙個自定義導航，我們可以，選中的導航新增class，import react from react import from react router dom 渲染route有三種方式 component render children export default exac...

react 路由Redirect元件學習

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