常用組件及方法全部整合進一個demo中。
主要涉及的概念有：
- HashRouter 與 BrowserRouter
- Route
- children 和 render 創建地址與組件的關係
- Link 與 NavLink
- Switch
- 頁面傳參
- 路由嵌套
- Redirect
目錄如下：
主要的文件有 index.html, index.css, index.js，主要呈現下以下三個文件，以便大家快速上手。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.css
.selected{
color: red;
background-color: #ccc;
}
.box{
border: #ccc solid 1px;
margin: 5px;
}
index.js
import React,{Component} from 'react'
import ReactDOM from 'react-dom'
// import {BrowserRouter as Router,Route,Link,Redirect,Switch} from 'react-router-dom'
import {HashRouter as Router,Route,Link,Redirect,Switch, NavLink,withRouter} from 'react-router-dom'
import './index.css'
class Home extends Component{
render(){
// 此三個屬性：history，location，match 一般在跳轉頁面時生成的，初始頁面則沒有。可通過 withRouter 方法實現。
console.log(this.props)
return (
<div>
<h1>Home</h1>
{/* Link 用於跳轉頁面 */}
<li><Link to='/About/1'>About</Link></li>
<li><Link to='/Info'>Info</Link></li>
<li><Link to='/Children'>Children</Link></li>
<li><Link to='/Render'>Render</Link></li>
{/* 可通過 NavLink 來改變激活目錄的樣式 */}
{/* <li><NavLink to='/About' activeClassName='selected'>About</NavLink></li>
<li><NavLink to='/Info' activeClassName='selected'>Info</NavLink></li> */}
</div>
)
}
}
function About(props){
// 使用路由後，會傳遞三個屬性：history，location，match
console.log(props)
return <h1 className='box'>About</h1>
}
class UserDetail extends Component{
to = (path)=>{
console.log(this.props)
// 第二個參數可用於傳參，在跳轉頁面中 props 的 Location 對象的 state 屬性中
// 此方法兩種模式都可以用，但是傳參只有在 Browser 模式下有效
// this.props.history.push(path,{a:1})
// 另一種跳轉頁面方式，只對 hash 模式有效，利於 hash 模式的頁面傳參
location.hash = '/About/1'
// console.log(location.hash)
}
render(){
return (
<div className='box'>
<h1>user detail</h1>
<li>ID: {this.props.match.params.id}</li>
<li>name: {this.props.match.params.name}</li>
<button onClick={()=>this.to('/About')}>跳轉至About頁面</button>
</div>
)
}
}
class Info extends Component{
render(){
// 使用路由後，會傳遞三個屬性：history，location，match
// console.log(this.props)
return (
<div className='box'>
<h1>Info</h1>
<li><Link to='/Info/detail/1/xiaoming'>小明</Link></li>
<li><Link to='/Info/detail/2/xiaohua'>小華</Link></li>
{/* 傳遞多個參數 */}
<Route path='/Info/detail/:id/:name' component={UserDetail}></Route>
</div>
)
}
}
// 使用 withRouter
let WithRouterAPP = withRouter(Home)
ReactDOM.render(<Router>
{/* <WithRouterAPP/> */}
<Home></Home>
{/* Switch 只顯示最先符合地址匹配的頁面 */}
<Switch>
<Route path='/About/:id' component={About}></Route>
<Route path='/Info' component={Info}></Route>
<Route path='/Render' render={(props)=>{
// console.log(props)
return (<div className='box'><h1>Render</h1>只有符合當前URL符合匹配時纔會跳轉</div>)
}}></Route>
<Route path='/Children' children={(props)=>{
// console.log(props)
return (<div className='box'><h1>Children</h1>每次頁面跳轉都會觸發此組件，可以通過傳入的props參數中的match屬性來查看當前地址是否符合匹配</div>)
}}></Route>
<Route path='/' render={(props)=>{return <h1>首頁</h1>}}></Route>
{/* 重定向 */}
<Redirect to='/'></Redirect>
</Switch>
</Router>,document.getElementById('app')
)