zoukankan      html  css  js  c++  java
  • react 中的路由 Link 和Route和NavLink

    route是配置,link是使用

    https://blog.csdn.net/chern1992/article/details/77186118(copy)

    嵌套路由一般使用Route,类似于vue中的作为嵌套路由的渲染,可以直接通过固定路由进入某一局部,等同于局部切换

    // index.js
    // ...
    render((
      <Router history={hashHistory}>
        <Route path="/" component={App}>
          {/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/}
          <Route path="/repos" component={Repos}/>
          <Route path="/about" component={About}/>
        </Route>
      </Router>
    ), document.getElementById('app'))

    Link进行的是路由切换跳转,整个单页面已经切换,而且能知道指向的路径是否是一个有效的路由

    // modules/NavLink.js
    import React from 'react'
    import { Link } from 'react-router'
    
    export default React.createClass({
      render() {
        return <Link {...this.props} activeClassName="active"/>
      }
    })
    // modules/App.js
    import NavLink from './NavLink'
    
    // ...
    
    <li><NavLink to="/about">About</NavLink></li>
    <li><NavLink to="/repos">Repos</NavLink></li>

    NavLink
    <NavLink>是<Link>的一个特定版本,会在匹配上当前的url的时候给已经渲染的元素添加参数,组件的属性有

    activeClassName(string):设置选中样式,默认值为active
    activeStyle(object):当元素被选中时,为此元素添加样式
    exact(bool):为true时,只有当导致和完全匹配class和style才会应用
    strict(bool):为true时,在确定为位置是否与当前URL匹配时,将考虑位置pathname后的斜线
    isActive(func)判断链接是否激活的额外逻辑的功能

    // activeClassName选中时样式为selected
    <NavLink
      to="/faq"
      activeClassName="selected"
    >FAQs</NavLink>
     
    // 选中时样式为activeStyle的样式设置
    <NavLink
      to="/faq"
      activeStyle={{
        fontWeight: 'bold',
        color: 'red'
       }}
    >FAQs</NavLink>
     
    // 当event id为奇数的时候,激活链接
    const oddEvent = (match, location) => {
      if (!match) {
        return false
      }
      const eventID = parseInt(match.params.eventID)
      return !isNaN(eventID) && eventID % 2 === 1
    }
     
    <NavLink
      to="/events/123"
      isActive={oddEvent}
    >Event 123</NavLink>
  • 相关阅读:
    **RESTful API版本控制策略
    HTTP协议header标头详解
    $headers = $this->input->request_headers();返回请求头(header)数组
    ****Web API 版本控制的几种方式
    ****RESTful API 设计最佳实践(APP后端API设计参考典范)
    php怎么获取checkbox复选框的内容?
    Linux中Samba详细安装【转】
    linux中serial driver理解【转】
    Linux内核中进程上下文、中断上下文、原子上下文、用户上下文的理解【转】
    八、mini2440裸机程序之UART(2)UART0与PC串口通信【转】
  • 原文地址:https://www.cnblogs.com/dianzan/p/10968463.html
Copyright © 2011-2022 走看看