页面Router
Hash Router
H5 Router
页面Router
window.loaction.href = 'http://www.baidu.com'
history.back()
hash路由
window.loaction = '#hash'
window.onhashchange = function(){
console.log('current hast', window.location.hash)
}
//H5 Router
// name title 路径
//推进状态
hsitory.pushState('test','Title','#test')
hsitory.pushState('test','Title','/user/index')
//替换当前路由
history.replaceState('test', null, '/index/test')
window.onpopstate = function(e){console.log('h5 router change',e)}
window.onpopstate = function(){
console.log(window.loaction.href) // 整个路径
console.log(window.loaction.pathname) //地址
console.log(window.loaction.hash) //hash
console.log(window.loaction.search) //hash
}
react-router-dom@4.2.2
路由方式<BrowserRouter>、<HashRouter>
路由规则<Route>
路由选项<Switch>
导航组件<Link>、<NavLink>
自动跳转<Redirect>
/*
* @Author: Rosen
* @Date: 2018-01-19 23:22:32
* @Last Modified by: Rosen
* @Last Modified time: 2018-01-20 00:11:34
*/
// 页面路由
window.location.href = 'http://www.baidu.com';
history.back();
// hash 路由
window.location = '#hash';
window.onhashchange = function(){
console.log('current hash:', window.location.hash);
}
// h5 路由
// 推进一个状态
history.pushState('name', 'title', '/path');
// 替换一个状态
history.replaceState('name', 'title', '/path');
// popstate
window.onpopstate = function(){
console.log(window.location.href);
console.log(window.location.pathname);
console.log(window.location.hash);
console.log(window.location.search);
}
// react-router
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route, Link } 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')
);