react学习笔记05@TencentIT

react学习笔记05@TencentIT

react-router 用法

npm i react-roter -S

在app.js里面引入

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

用Link to 页面跳转切换

首页 新闻

注意事项
1 配置router时候 所有根都应该被 包含起来
2 引入时候 注意 Link 需要引入 否则 报错 Link也是一个模块
import { BrowserRouter as Router, Route, Link } from “react-router-dom”;

在 Link 中加入 exact 表示是一个严格匹配

首页

动态路由 配置

传值写法 注意 写ES6 `` 符号 需要套一个{}

页面跳转 获取传值 '获取传递过来的ID',this.props.match.params.id

get 方式获取传递过来的值 拼一个参数 传递过去

我是新闻{this.props.match.params.id} 获取到传递过来的值 {this.props.location.search

请求数据的时候 还是应该放在 componentDidMount 里面 ，如果放在componentWillMount里面，如果请求比较快，render里面拿不到数据

可以实现跳转

二级路由如何实现 公司级别写法
router.js 文件里面这么写

 {path:'/user',component:User,routes:[{path:'/user/',component:Main},{path:'/user/info',component:Info}]},

App.js 文件写法

{/* 对 routes 进行遍历   */}{routes.map((route,key)=>{act){return <Route key={key}  exact path={route.path}render = {props=>(<routeponent {...props} routes={utes} />)}/>}else {return <Route key={key}   path={route.path} render = { props => (<routeponent  {...props} routes={utes}/>)}/>}})}

使用的二级路由的文件 user.js 的写法

  {/* 公司级 写法 通过父子传参，从App.js 传递 ，把 二级路由放到了props里面，在componentWillMount打印this.props就能看到里面有 router.js 里面的信息 二级路由 routes 里面传递过来的属性*/}{utes.map((item,key)=>{return <Route exact path={item.path} component={itemponent}/>})}{/* 最原始的写法 */}{/* <Route path='/user/info' component={Info}/><Route exact key={key} path='/user/' component={Main}/> */}