常用组件及方法全部整合进一个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')
)