• 试着用React写项目-利用react-router解决跳转路由等问题(二)


    转载请注明出处:王亟亟的大牛之路

    这一篇还是继续写react router相关的内容,废话之前先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android (总有你须要的东西)


    上一篇讲到我们能够利用 Router来实现嵌套跳转等效果,可是那些都是静态的,这一篇着重于写一些动态跳转内容

    之前也有提及。旧时代我们经常使用的跳转形式就是<a/>,React丰富的api也提供给我们相似的实现。那就是Link,我们用一个样例来看一下这玩意怎么用

    他也是react-router包里的一部分,先 import

    import { Link } from 'react-router'

    然后就能够正常使用了,像这样

    import React from 'react'
    import { Link } from 'react-router'
    
    export default React.createClass({
      render() {
        return (
          <div>
            <h1>React Router Tutorial</h1>
            <ul role="nav">
              <Link to="/Three">Three</Link><br></br>
              <Link to="/Three">Three</Link>
            </ul>
          </div>
        )
      }
    })

    效果例如以下
    这里写图片描写叙述

    当然。之前注冊的<Route>不能少,不然无法进行跳转

    main.js的片段

      <Route path="/Three" component={Three}/>
      <Route path="/Two" component={Two}/>

    activeStyle activeClassName

    activeStyle 能够帮我们改变链接的样式。使用简单配一个属性就可以。像这样

    <Link to="/Two" activeStyle={{color: 'red'}}>Two</Link>

    上面代码中,当前页面的链接会红色显示

    还有个字段是activeClassName 指定当前路由的Class

    像这样

    <Link {...this.props} activeClassName="active"/>

    那既然 相似的使用场景非常多。为何不封装一个组件。方便调用?

    ok,我们新建一层文件夹,像这样

    这里写图片描写叙述

    里面放一个专门处理跳转的NavLink.js对<Link>进行一些简单的封装

    import React from 'react';
    import { Link } from 'react-router';
    
    export default React.createClass({
      render() {
        return (<Link {...this.props} activeClassName="active"/>)
      }
    })
    

    非常easy让我们能传參。统一设置activeClassName,当然你想自己定义怎么都能够


    URL Params

    有些时候我们会碰到一些非常像但又不是全然不同的路由,像这样

    /Three/haha
    /Three/haha/haha1
    /Three/hehe/hehe1

    官方提供给我们一个 以: 开头的配对形式。像这样

    /Three/:haha/:haha1

    我们 拿

    /Three
    /Three/haha

    做个演示案例

    由于是分层渲染,所以Three/haha就要交给第三方黑暗势力去展示。而Three还是给Three

    所以我们的main.js,如今长这样

    import React from 'react';
    import { render } from 'react-dom';
    import { Router , Route , hashHistory , Link } from 'react-router';
    import First from './First';
    import Three from './Three';
    import Two from './Two';
    import Four from './Four';
    
    
    
    render((
      <Router history={hashHistory}>
        <Route path="/" component={First}>
        </Route>
        <Route path="/Three" component={Three}/>
        <Route path="/Three/:name" component={Four}/>
        <Route path="/Two" component={Two}/>
      </Router>
    ), document.getElementById('app'))
    

    Four就是我们新加入渲染的组件,内容不用管。你得理解Three和Three/:name实质上并非同一个东西可是他属于同一种匹配规则。而这规则匹配后都将被Four去渲染


    Four.js

    import React from 'react';
    
    export default React.createClass({
      render(){
        return (
          <div>
             <h2>{this.props.params.name}</h2>
          </div>
        )
      }
    })
    

    这里接受一个传递来的name属性,把它显示出来。值是跳转传来的

    我们让 第三个页面产生多级跳转到,更改例如以下

    import React from 'react';
    import styled from 'styled-components';
    import NavLink from './../component/nav/NavLink';
    
    const H2 = styled.h2`
      color: #eee
    `;
    
    export default React.createClass({
      render(){
        return (
          <div>
            <h2>hi i am three</h2>
              <ul>
                <NavLink to="/Three/haha">haha</NavLink><br></br>
                <NavLink to="/Three/heihei">heihei</NavLink>
              </ul>
          </div>
        )
      }
    })
    
    

    先导包把刚才自己创建的主件给“抠来用“

    import NavLink from './../component/nav/NavLink';

    然后分别进行路由配置,一个传haha一个heihei,我们来看下Four有没有对应效果,先看看Three

    这里写图片描写叙述

    我们点一下haha

    这里写图片描写叙述

    url,值都显示出了我们已经得到了传来的haha

    下一篇将是Router的完结篇,总体是从官方demo入手加以自己的理解和尝试,有问题或者有疑问能够给我留言,谢谢。

    https://github.com/ddwhan0123/ReactDemo

  • 相关阅读:
    Oracle数据库ORA-12154: TNS: 无法解析指定的连接标识符详解
    Oracle Client客户端+PLSQL配置
    函数和存过的创建调用
    MVC学习二:基础语法
    前台和后台的相互传值
    MVC学习一:EF
    博客转发小工具2
    博客转发小工具1
    博客园页面设置
    js问题杂记
  • 原文地址:https://www.cnblogs.com/gavanwanggw/p/7350974.html
走看看 - 开发者的网上家园