react-router-dom

安装脚手架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，浏览器页面显示

猜你喜欢