react路由,脚手架

  1. react脚手架的使用

    import React,{Component} from 'react'
    class 组件名 extends Component {state ={数据}}
    样式类名会全局泄露
    
  2. Axios

    组件下直接引入axios
    Publick文件夹是特殊路径
    配置代理:package.json下 "proxy":"http://localhost:3001"
    Post请求使用非受控组件
    <input type="text" ref={(ref)=>this.user=ref}/>
    
  3. 路由基础

    引入模块:import {BrowserRouter as Router,NavLink,Router,Switcj}from 'react-router-dom';
    或import{HashRouter as Router,Link,Route}from 'react-router-dom'
    
    Router:路由承载区域
    NavLink/Link :点击a链接
    Route:渲染组件视图
    Switch:匹配到路径后,之后的相同路径就不会再匹配了
    Redirect:重定向
    
  4. 路由动态传参:

    path='/home/:id'
    <NavLink to={`/home/${this.state.name}`}>home</NavLink>
    接收参数:this.props.match.params.id
    
  5. 编程式导航:

    this.props.history.push('/list')
    this.props.history({pathname:'/list',obj:{name:'jack',age:18}})
    接收参数:this.props.history.location.obj
    
  6. 子路由:和主路由配置方法相同

  7. path=’*’ 4040页面 exact 加在link前,精确匹配

全部评论

相关推荐

湫湫湫不会java:1.在校经历全删了2.。这些荣誉其实也没啥用只能说,要的是好的开发者不是好好学生3.项目五六点就行了,一个亮点一俩行,xxx技术解决,xxx问题带来xxx提升。第一页学历不行,然后啥有价值的信息也没有,到第二页看到项目了,第一个项目九点,第二个项目像凑数的俩点。总体给人又臭又长,一起加油吧兄弟
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务