Router原理和React-Router

1 Rouer原理

Router指的是瀏覽器中一種處理訪問先後關係的機制，簡單點來說就是允許我們在不同頁面進行跳轉然後記錄跳轉關係還能原路退回的機制。

三個要素：

• 歷史：棧的形式
• 跳轉：負責不同頁面的挑戰動作，並且可傳遞引數
• 事件：開啟新頁面或退回上一頁面觸發的邏輯

2 常見Router

• 頁面Router
• Hash Router
• H5 Router

程式碼演示：

// 頁面路由
window.location.href = 'http://www.baidu.com'
 
;
// 回退
history.back();

// hash 路由
window.location.href = '#test';
// 監聽hash路由
window.onhashchange = function(){
	console.log('current hash:',window.location.hash);
};

// h5 路由
// 推進一個狀態
history.pushState('test','Title','#test');
// 替換一個狀態
history.replaceState('test',null,'/index/test')
// 監聽h5 後退
window.onpopstate
 
 = function(e){
	console.log('h5 router change:',e.state);
	console.log(window.location.href);
	console.log(window.location.pathname);
	console.log(window.location.hash);
	console.log(window.location.search);
}

3 React-Router

• React官方提供的路由外掛，單頁路由必備
• 使用版本：[email protected]
• 動態路由（靜態路由：在一個根節點下定義所有路由；動態路由：路由放在元件裡，須需要時再去定義），純react元件

3.1 常見

• <BrowserRouter> / <HashRouter>，路由方式
• <Router>，路由規則
• <Switch>，路由選項
• <Link/> / <NavLink>，跳轉導航
• <Redirect>，自動跳轉

3.2 程式碼演示

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom'

class A extends React.Component{
	constructor(props){
		super(props);

	}
	render(){
		return(
			<div>
				Component A
				<Switch>
					{/* 完全匹配 */}
					<Route exact path={`${this.props.match.path}`} render={(route) =>{
							return <div>當前元件是不帶引數的A</div>
						}}/>
					<Route path={`${this.props.match.path}/sub`} render={(route) =>{
							return <div>當前元件是Sub</div>
						}}/>
					<Route path={`${this.props.match.path}/:id`} render={(route) =>{
							return <div>當前元件是帶引數的A，引數是：{route.match.params.id}</div>
						}}/>
				</Switch>
			</div>
		);
	}
}

class B extends React.Component{
	constructor(props){
		super(props);

	}
	render(){
		return(
			<div>Component B</div>
		);
	}
}

class Wrapper extends React.Component{
	constructor(props){
		super(props);

	}
	render(){
		return(
			<div>
				<Link to="/a">元件A</Link>
				<br/>
				<Link to="/a/123">帶引數的元件A</Link>
				<br/>
				<Link to="/b">元件B</Link>
				<br/>
				<Link to="/a/sub">/a/sub</Link>
				{this.props.children}
			</div>
		);
	}
}

ReactDOM.render(
	<Router>
		<Wrapper>
			<Route path="/a" component={A}/>
			<Route path="/b" component={B}/>
		</Wrapper>
	</Router>
	,
	document.getElementById('app')
);