react(四)路由的使用及请求数据

第一步安装路由包

npm install react-router-dom -S

第二步 在根组件App.jsx中导入包

import {HashRouter,Route,Link} from 'react-router-dom'

第三步 使用路由
在根组件render方法return HashRouter

render(){
return <HashRouter></HashRouter>
}

第四步 配置Link
在根组件中配置Link

<Link to="/home"></Link>

第五步 配置Route

<Route path='/home' component={Home}></Route>

完整的根组件代码

import React from 'react'
import {HashRouter,Route,Link} from 'react-router-dom'
import Home from './components/home.jsx'
import Movie from './components/movie.jsx'
import User from './components/user.jsx'

export default class App extends React.Component{
    render(){
        return <HashRouter>
            <div>这是根组件</div>
            <Link to="/home">家</Link>|
            <Link to="/movie/15">电影</Link>|
            <Link to="/user">用户</Link>

            <Route path="/home" component={Home}></Route>
            <Route path="/movie/:id" component={Movie} exact></Route>
            <Route path="/user" component={User}></Route>
        </HashRouter>
    }
}

使用参数
在子组件中使用

this.props.match.params.参数的键

在根组件中配置好路由后，可以创建各个子组件，然后调用即可

请求数据利用ES6中的fetch
1、fetch发送请求

fetch(url)

2、.then获取response中的json数据

.then(response=>{
return response.json()
})

3、.then获取data

.then(data=>{
此时的data即是数据,fetch后应紧跟两个.then
})

https://www.cnblogs.com/JsonGoIt/p/9395058.html 完善的fetch教程
https://www.cnblogs.com/jiebba/p/9591534.html 前端访问后端报错