React js 第五天

路由

• 按需导入 import {HashRouter,Route,Link} from ‘react-router-dom’

  • HashRouter 表示一个路由的根容器，将来，所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了！
  • Route 表示一个路由规则，在Route中，有两个比较重要的属性，path component =》vue routes：【path：，component：】
  • Link表示一个路由的连接，就好比vue中的router-link

• Route创建的标签，就是路由规则，其中表示要匹配的路由，component表示要展示的组件

• 在vue中有个router-view的路由标签，专门用来放置，匹配到的路由组件的，但是，在react-router中，并没有类似这样的标签，二十直接把Route标签当作一个坑（占位符）

• Route有两个身份1、是一个路由匹配规则；2、是一个占位符表示将来匹配到的组件都放在这个位置。

	//组件在这里就不导入了
	import React from 'react'
import {HashRouter,Route,Link} from 'react-router-dom'
import Home from './component/another/home.jsx'
import music from './component/another/music.jsx'
import About from './component/another/about.jsx'
import Music from './component/another/music.jsx'


export default class app extends React.Component{
    constructor(props){
        super(props)
        this.state={}
    }

    render(){
        return <HashRouter>   //一个网站只需要使用一次HashRouter来开启路由
            <div>
                这是app父组件
                <hr/>
                <Link to='/home'>主页</Link>&nbsp;&nbsp;  
                <Link to='/music'>音乐</Link>&nbsp;&nbsp;
                <Link to='/about'>关于</Link>
                <hr/>

                <Route path="/home" component={Home}></Route>
                <Route path="/music" component={Music}></Route>
                <Route path="/about" component={About}></Route>

            </div>
        </HashRouter>
    }
}

//

注意Route是模糊查询会直接匹配到类似的路由
如果想要使用严格的匹配规则 在Route 上添加 exact 属性

• 路由传参
  • 我们让音乐这一栏访问top100这个榜单，和少年这首歌曲

  < Link to=’/music/top100/少年’>音乐< /Link>  
  < Route exact path="/music/:bang/:song" component={Music}></ Route>
  然后我们在music组件中查看发现props中的match下面的params是我们路由的参数
  this.state={
  RouterParams:this.props.match.params
  }

ant design UI

在react中如何请求数据
在vue中有vue-resource
在react中可以使用fetch来请求数据
fetch(‘url’).then(response=>{
return response.json(); //当使用fetchAPI获取数据的时候，第一个then中，获取不到数据第一个then中拿到的是一个Response对象。我们可以调用response.json（）得到一个新的promise

}).then(data=>{
console.log(data)
})

this.props.history.push(‘url’)
注意： 哪怕为路由启用了exact精确匹配模式，也会从上到下，把所有的路由规则匹配一边
使用路由中的Switch组件，能够指定，如果前刀面的路由规则有仙瀑配到了则放弃匹配后续的路由