zoukankan      html  css  js  c++  java
  • react路由的安装及格式和使用方法

    react路由的安装:
    在要创建项目的目录命令窗里输入:

    cnpm install -g create-react-app

    create-react-app  项目名
    在创建好的项目目录命令窗里输入:
    cnpm install react-router-dom --save(此处可以不用--save但是为了方便别人调用你的包时。更快捷的安装好依赖包,我们就得要写了,(cnpm install命令可以自动安装路由依赖文件))
     
     
     
    2.根据路径,显示相应的组件
    JSX路由的写法,路由的jsx组件
     
     
    const Basic = () => (
    <Router>
    <div>
    <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/page1">Page1</Link></li>
    <li><Link to="/page2/123">Page2</Link></li>
    </ul>
     
    <hr/>
     
    <Route exact path="/" component={App}/>
    <Route path="/page1" component={Page1}/>
    <Route path="/page2/:id" component={Page2}/>
    </div>
    </Router>
    )
     
    exact:表示精确路劲
    3.路由视图的格式:
    <router>
    //只能放置一个根元素比如一个div
    <div>
    //视图里,如果要实现内容相对应的跳转
    <Link to='路径'></Link>
    //决定什么路径显示什么组件
    <route path='路径' component={组件名}>
    </div>
    </router>
     
    4.动态路由:一个组件要根据路由变量显示不同的内容,路由变量通过props传值
    <route path='/路径名/:变量名称' component={组件名}>
     
    function Page2(props){
    props.match.params.变量名称
    return  相应的视图
    }
     
     
    3/路由试图的格式:
     
    <Router>
     
    //这里只能放置1个根元素
     
    <div>
     
     
    //试图里,如果需要内容的相对应的跳转,那么需要使用<link>
     
    <Link to='/page1'>进入page1页面</Link>
     
     
    //决定什么路径显示什么组件
     
    <Route path='/page1' component={App} >
     
     
     
    </div>
     
     
    </Router>
     
     
     
     
    4/动态路由:1个组件要根据,路由变量从而显示不同的内容,路由变量通过props进行传值
     
     
    <Route path='/page2/:变量名称' component={Page2} >
     
     
    function Page2(props){
     //通过props里的match属性获取相对应的变量
     props.match.params.变量名称
     
     return 相对应的试图
     
     
    }
     
     
     
    5/JS执行页面跳转
     
    this.props.history.go(),前进/后退页面
     
    this.props.history.goback(),返回页面
     
    this.props.history.goforward,前进页面
     
     
     
     
    6//路径直接跳转
     
    this.props.history.push('路径名称'),跳转到相对应的路径
  • 相关阅读:
    Quartz 基本概念及原理
    quartz-2.2.x 快速入门 (1)
    hive踩过的小坑
    spring profile 多环境配置管理
    win10窗口设置眼睛保护色
    优雅地在markdown插入图片
    Using Spring Boot without the parent POM
    isDebugEnabled作用
    Log 日志级别
    为什么要使用SLF4J而不是Log4J
  • 原文地址:https://www.cnblogs.com/Dark-fire-liehuo/p/9571633.html
Copyright © 2011-2022 走看看