react router4 x 路由控制

2021-10-07 08:12:51 字數 2491 閱讀 4678

1.第一種封裝乙個私有路由

這是我的路由配置，route大家都知道。不用多講。privateroute 這個是我自己封裝的**如下：

privateroute.jsx

import react from 'react';


import  from 'react-router-dom';


import proptypes from 'prop-types';


import storage from 'utils/storage.js';


//私有路由，只有登入的使用者才能訪問


class privateroute extends react.component)


if(!isauthenticated) = this.props;


settimeout(() => , 1000)}}


render() = this.props;


return this.state.isauthenticated ?  (


( )} />


) : ("請重新登入");


}}privateroute.proptypes  =


export default withrouter(privateroute);
使用：

.......


import react from 'react';


import  from 'react-router-dom';


import  from 'react-router-redux'


import reducer from '../reducers/index.js';


import home from 'container/home.jsx';


import login from 'container/login.jsx';


import regist from 'container/regist';


import privateroute from 'component/common/privateroute.jsx';


.......
**很簡單，仔細看一下就明白。這裡的privateroute 屬性介面和 route基本類似。我這裡只是提供一種思路，大家可以根據自己的業務新增自己的特色。

第二種是使用高階元件。

高階元件（hoc）是react中對元件邏輯進行重用的高階技術。但高階元件本身並不是react api。它只是一種模式，這種模式是由react自身的組合性質必然產生的。具體而言，高階元件就是乙個函式，且該函式接受乙個元件作為引數，並返回乙個新的元件。

現在知道了高階元件是什麼，現在我們就用該思路來做乙個高階私有路由 hocprivateroute**如下

hocprivateroute.jsx

import react from 'react';


import  from 'react-router-dom';


import proptypes from 'prop-types';


import storage from 'utils/storage.js';


throw new error("缺少元件引數");


return false;


}//withrouter 也是乙個高階元件 傳遞 history


return withrouter(


class extends react.component


componentwillmount())


if(!isauthenticated) = this.props;


settimeout(() => , 1000)}}


render()})


}export default withhocprivateroute;
使用：

...


import react from 'react';


import  from 'react-router-dom';


import  from 'react-router-redux'


import reducer from '../reducers/index.js';


import home from 'container/home.jsx';


import login from 'container/login.jsx';


import regist from 'container/regist';


//import privateroute from 'component/common/privateroute.jsx';


import hocprivateroute from 'component/common/hocprivateroute.jsx';


const  privateroute =  hocprivateroute(route);


...

React Router概述（路由）

react路由 站點 1.可以根據不同的位址，展示不同的元件 2.可以無重新整理的跳轉頁面 具備上面兩個功能的可以稱之為路由 react router 2.react router dom 利用路由核心庫，結合實際頁面，實現跟頁面路由密切相關的功能 兩種模式 協議名 schema https 主機名...

react router 4v 路由巢狀問題

巢狀的路由中，子級的link跳轉到父級時，頁面無法整個渲染到父級。原因 某一級的路由用了router元件，導致內部link的時候無法將整個頁面渲染到 解決方法 全域性乙個router。子級的兄弟路由無法匹配 原因 頂層路由用了exact，導致最開始的 about 無法匹配到 about sth 由於...

react router 巢狀路由

import react from react import from react router dom export default function function home console.log match return h2 function about function topics ...