官網文檔 https://reacttraining.com/react-router/core/guides/philosophy
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIn5GcuM2NlJWYxcDNmJjNjJzNwQWO5YWMxIDMiNWOxUjZ1gzNfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
頁面路由
Hash 路由
H5路由
隻對後退記錄有效
// 頁面路由
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 { HashRouter 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')
);
通過以上代碼,首先示範 Hash 路由
再示範 H5路由,即修改此處
将參數傳給元件