react路由許可權設定

在react專案中有時我們的一些頁面需要許可權才能訪問，這裡以需要登入才能訪問進行的設定

在這裡可以看到許可權頁面和關於頁面是需要登入才能訪問的

import react,

from
'react'
;import
from
"react-router-dom"
;class
extends
component
>
<
/route>
// 
"/login" exact component=
>
<
/route>
"/private"
>
<
/private>
<
/privatepage>
"/about"
>
<
/about>
<
/privatepage>
<
/switch>
<
/router>
<
/div>);
}}export
default
;// 許可權處理
// private 登入後 可以進入，沒有登入跳轉到 login 登入頁面
// login 登入頁面
// privatepage 頁面（需要許可權頁面都包裹再裡面）
// fakeauth登入狀態記錄 isauth 是否登入 | authentic 授權登入方法 signout 登出方法
const fakeauth=
,signout
(cb)
}// 所有需要許可權頁面都放入內部
function
privatepage()
)=>}}
/>
//將loacation賦值給from,傳遞過去}}
/>
}function
home()
function
about()
function
login
(props)
=props.location.state ||
}// console.log(from,'上乙個頁面的loacation');
// 通過props接收傳遞過來state也就是上乙個頁面的location ||預設首頁
return
(/h1>
}>按鈕<
/button>
<
/div>)}
function
private()
}>退出<
/button>
<
/div>
)}要麼使得children通過轉殖完全繼承,要不使用userhistory方法不然退出功能無法找到history方法
不然 private頁面退出功能報錯

react 動態修改路由 React 動態路由

封裝乙個高階元件，用來實現將普通的元件轉換成動態元件import react from react const asynccomponent loadcomponent class asynccomponent extends react.component catch err this.state...

react學習六 react路由

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

react 動態修改路由 React中的路由設定

在本文中，我們來看看如何在react中設定路徑路由。我們期望在結尾時取得如下的成績 在本次演示中，我們建立了三個頁面 page 1，page 2，page 3。為了簡化處理，三個頁面的定義類似如下 import react from react function page1 from react r...