安装脚手架create-react-app
npm install -g create-react-app
创建项目react-learn
create-react-app react-learn
启动项目
cd react-learn
npm start
本次是学习react-router-dom,首先安装react-router-dom包
npm install react-router-dom --save
App.js文件内容
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about/haha/xixi/hehe">About</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about/:id/:name" component={About} />
</div>
</Router>
);
class Home extends Component{
constructor(props){
super(props)
this.handleClick=this.handleClick.bind(this);
this.goBack=this.goBack.bind(this)
}
handleClick(){
this.props.history.push('/about')
}
goBack(){
this.props.history.goBack()
}
render(){
console.log(this.props);
return(
<div>
<h2>Home</h2>
<button onClick={this.handleClick}>跳转到About</button>
<button onClick={this.goBack}>返回</button>
</div>
)
}
}
const About = (props) =>{
console.log(props)
return (
<div>
<h2>About</h2>
</div>
)
}
class App extends Component {
render() {
return (
<BasicExample/>
);
}
}
export default App;
点击About,页面跳转到http://localhost:3000/about/haha/xixi/hehe
About组件的props有三个属性history、location和match
先看match属性
match:
{
isExact:false,
params:{id:"haha",name:"xixi"},
path:"/about/:id/:name",
url:"/about/haha/xixi"
}
//isExact表示浏览器中的路径和Route中的path是否是精准匹配
//http://localhost:3000/about/haha/xixi/hehe不是精准匹配
//在浏览器地址栏输入http://localhost:3000/about/haha/xixi,isExact的值就是true
//params代表传递的参数
//path 设置匹配路径格式
//url 表示浏览器路径中匹配path的部分,而不是整个路径,只是正确匹配部分
//http://localhost:3000/about/haha/xixi/hehe, path:"/about/:id/:name"
//所以匹配部分就是/about/haha/xixi
再来看一下,路由组件上有哪些信息,路由就是组件。
<Route path="/about/:id/:name" component={About} />
有Props 、State和Context,证明了路由就是组件。
Props上有component属性存放的是About组件
history属性
点击Home,进入Home页面
点击跳转About按钮,就会跳转到About页面,点击返回,跳转到上次的路由,这是利用了Props中的history属性
push()函数可以用来跳转
goBack()跳转到上一级
listen(fn)监听路由变化:每次路由跳转,执行fn
history.listen((location)=>{console.log(location)})
当路由跳转到http://localhost:3000/about/haha/xixi/hehe
listen()函数实际上把fn添加到一个队列中,每次路由跳转,执行队列中的函数,
如果history.listen((location)=>{console.log(location)})执行了两次,此时队列中含有两个匿名函数
(location)=>{console.log(location),每次路由跳转打印两次参数location。
history:{
action:"POP"
block:block()
createHref:createHref()
go:go()
goBack:goBack()
goForward:goForward()
length:5
listen:listen()
location:{…}
push:push()
replace:replace()
}
location属性
在浏览器地址栏中输入http://localhost:3000/about/haha/xixi/hehe?age=18
location:{
hash:"",
pathname:"/about/haha/xixi/hehe",
search:"?age=18"
}
WithRouter
现在给About组件添加一个子组件AboutChild,观察AboutChild组件的props值是Empty object,这是因为
<Route path="/about/:id/:name" component={About} />
只能给About组件的props属性上添加history、location和match属性,不会给AboutChild组件的props属性上添加这三个属性。
如果要给AboutChild组件的props添加history、location和match属性,需要使用WithRouter。
import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link ,withRouter} from 'react-router-dom'
const BasicExample = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about/haha/xixi/hehe">About</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about/:id/:name" component={About} />
</div>
</Router>
);
class Home extends Component{
constructor(props){
super(props)
this.handleClick=this.handleClick.bind(this);
this.goBack=this.goBack.bind(this)
}
handleClick(){
this.props.history.push('/about')
}
goBack(){
this.props.history.goBack()
}
render(){
console.log(this.props);
return(
<div>
<h2>Home</h2>
<button onClick={this.handleClick}>跳转到About</button>
<button onClick={this.goBack}>返回</button>
</div>
)
}
}
const About = (props) =>{
console.log(props)
return (
<div>
<h2>About</h2>
<AboutChildWithRouter/>
</div>
)
}
const AboutChild = (props) => {
console.log(props)
return (
<div>AboutChild</div>
)
}
const AboutChildWithRouter = withRouter(AboutChild)
class App extends Component {
render() {
return (
<BasicExample/>
);
}
}
export default App;
使用create-react-app脚手架时,生成的public文件夹可以当成一个小型的服务器,例如,public文件夹下有一个manifest.json文件,当在浏览器地址栏中输入http://localhost:3000/manifest.json,在路由中找不到对应的匹配时,就会去public文件夹下寻找。
在浏览器地址栏输入http://localhost:3000/manifest.json,浏览器页面显示