• 使用Link标签// 字符串定位描述符 String location descriptor. <Link to="/hello"> Hello </Link>// 对象定位描述符 Object location descriptor. <Link to={{ pathname: '/hello', query: { name: 'ryan' } }}> ...

    使用Link标签

    // 字符串定位描述符 String location descriptor.
    <Link to="/hello">
      Hello
    </Link>
    
    // 对象定位描述符 Object location descriptor.
    <Link to={{ pathname: '/hello', query: { name: 'ryan' } }}>
      Hello
    </Link>
    
    // 函数返回定位描述符Function returning location descriptor.
    <Link to={location => ({ ...location, query: { name: 'ryan' } })}>
      Hello
    </Link>
    

    属性描述

    activeClassName

    当被点击时,的className接受一个它的值(activeClassName),默认情况下它是不激活;

    activeStyle

    当被点击时,activeStyle中的值会添加到转换后的<a/>中,样式是style="color:red;"

    onClick(e)

    自定义单击事件处理程序。

    • e.preventDefault():阻止默认事件
    • e.stopPropagation():阻止事件冒泡

    onlyActiveOnIndex

    如果onlyActiveOnIndex的值是true,中的路径完全匹配时才会连接指定路由

    其它

    也可以在上定义 title、id、className属性;

    展开全文
  • react中Link和NavLink组件

    2019-09-04 19:21:55
    现在,我们应用需要各个页面间切换,如果使用锚点元素实现,每次点击时,页面被重新加载,React Router提供了组件用来避免这种状况发生。当 你点击时,url会更新,组件会被重新渲染,但是页面不会重新加载 使用...

    参考:http://www.uprogrammer.cn/react-router-cn/docs/API.html

    Link
    现在,我们应用需要在各个页面间切换,如果使用锚点元素实现,在每次点击时,页面被重新加载,React Router提供了组件用来避免这种状况发生。当 你点击时,url会更新,组件会被重新渲染,但是页面不会重新加载

    使用to参数来描述需要定位的页面。它的值既可是字符串,也可以是location对象(包含pathname、search、hash、与state属性)如果其值为字符串,将会被转换为location对象

    replace(bool):为 true 时,点击链接后将使用新地址替换掉访问历史记录里面的原地址;为 false 时,点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false;

    展开全文
  • Link现在,我们应用需要各个页面间切换,如果使用锚点元素实现,每次点击时,页面被重新加载,React Router提供了&lt;Link&gt;组件用来避免这种状况发生。当 你点击&lt;Link&gt;时,url会更新,...

    Link

    现在,我们应用需要在各个页面间切换,如果使用锚点元素实现,在每次点击时,页面被重新加载,React Router提供了<Link>组件用来避免这种状况发生。当 你点击<Link>时,url会更新,组件会被重新渲染,但是页面不会重新加载

    嗯、先看个例子

    // to为string
    <Link to="/about">关于</Link>
    
    // to为obj
    <Link to={{
      pathname: '/courses',
      search: '?sort=name',
      hash: '#the-hash',
      state: { fromDashboard: true }
    }}/>
    
    // replace 
    <Link to="/courses" replace />

    <Link>使用to参数来描述需要定位的页面。它的值既可是字符串,也可以是location对象(包含pathname、search、hash、与state属性)如果其值为字符串,将会被转换为location对象

    replace(bool):为 true 时,点击链接后将使用新地址替换掉访问历史记录里面的原地址;为 false 时,点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false;

    点击Link后,路由系统发生了什么?

    Link 组件最终会渲染为 HTML 标签 <a>,它的 to、query、hash 属性会被组合在一起并渲染为 href 属性。虽然 Link 被渲染为超链接,但在内部实现上使用脚本拦截了浏览器的默认行为,然后调用了history.pushState 方法(注意,文中出现的 history 指的是通过 history 包里面的 create*History 方法创建的对象,window.history 则指定浏览器原生的 history 对象,由于有些 API 相同,不要弄混)。history 包中底层的 pushState 方法支持传入两个参数 state 和 path,在函数体内有将这两个参数传输到 createLocation 方法中,返回 location 的结构如下:

    location = {
      pathname, // 当前路径,即 Link 中的 to 属性
      search, // search
      hash, // hash
      state, // state 对象
      action, // location 类型,在点击 Link 时为 PUSH,浏览器前进后退时为 POP,调用 replaceState 方法时为 REPLACE
      key, // 用于操作 sessionStorage 存取 state 对象
    };
    系统会将上述 location 对象作为参数传入到 TransitionTo 方法中,然后调用 window.location.hash 或者window.history.pushState() 修改了应用的 URL,这取决于你创建 history 对象的方式。同时会触发history.listen 中注册的事件监听器。

    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>
    

    展开全文
  • 8、Link 标签 to 属性为对象时(路由信息传值) DEMO地址 参考 6.routeInfo.js 组件里,每个组件的路由数据,都是各自独立的。 之前分析,已知: match 属性的值,存储的是该 Route 标签的路由; ...
    
    
    

    DEMO地址

    参考 6.routeInfo.js

    在组件里,每个组件的路由数据,都是各自独立的。

    在之前分析中,已知:

    1. match 属性的值,存储的是该 Route 标签的路由;
    2. location 属性的值,其中 url 和 path 不同 Route 组件中,值是相同的;


    但【2】并不准确,准确的说,自带的 hash , search , pathname 这三个属性的值,是相同的;

    假如你在里面添加了其他数据,那么结果就有所不同了。

    例如 Link 标签,他有一个属性 to,可以用于路径跳转。

    比较常见的是以下这种写法:

    <Link to={`${props.match.url}/`}>子路由</Link>

    但是,to 的值,也可以用对象,例如这样:

    <Link to={{
        pathname: `${this.props.match.url}/1`,
        myState: '这是我自定义的变量'
    }}>示例1</Link>

    当路由信息匹配时(参照DEMO):

    1、父组件的路由信息为:

    {
        "match": {
            "path": "/RouteInfo",
            "url": "/RouteInfo",
            "isExact": false,
            "params": {}
        },
        "location": {
            "pathname": "/RouteInfo/1",
            "search": "",
            "hash": ""
        },
        "history": {
            "length": 9,
            "action": "POP",
            "location": {
                "pathname": "/RouteInfo/1",
                "search": "",
                "hash": ""
            }
        }
    }

    2、被传值的子组件的路由信息:

    {
        "match": {
            "path": "/RouteInfo/1",
            "url": "/RouteInfo/1",
            "isExact": true,
            "params": {}
        },
        "location": {
            "pathname": "/RouteInfo/1",
            "myState": "这是我自定义的变量",
            "search": "",
            "hash": ""
        },
        "history": {
            "length": 24,
            "action": "PUSH",
            "location": {
                "pathname": "/RouteInfo/1",
                "myState": "这是我自定义的变量",
                "search": "",
                "hash": ""
            }
        }
    }

    可以看到,被传值的子组件的路由信息,location 会多了一个属性。

    但是请注意,以下几种情况会导致失去这些信息:

    1. 刷新页面;
    2. 访问更深一层的子组件(因为信息被更新了);
    3. 刷新后,访问相同的 url。举例来说,你访问了该 url,传值了也收到了,然后刷新页面,再点击该 url,是没有的。原因是相同 url 跳转;
    展开全文
  • react 路由Link配置

    2020-03-24 08:27:14
    1、Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:"/xx",search:'?键值对',hash:"#xxx",state:{键值对}} 会自动将pathname、search、hash拼接url路径上,state为传入的参数 可...
    1、Link的to属性
    		(1)放置路由路径
    		(2)放置对象,且为规定格式
    			{pathname:"/xx",search:'?键值对',hash:"#xxx",state:{键值对}}
    		
    			会自动将pathname、search、hash拼接在url路径上,state为传入的参数
    			可通过输出props查看对象内的信息
    			this.props.location.state.键名获取state内的数据
    
    2、Link的replace属性
    	添加replace将跳转前的上一个页面替换成当前页面,只将当前页面入栈
    
    3、Link传参
    	在to路径后添加"/键值"
    	在路由route,path路径后添加"/:键名"
    	在组件中,函数式组件:先传入props形参,然后props.match.params.键名
    			类组件:this.props.match.params.键名
    

    代码示例:

    import React,{Component} from 'react'
    //import {Route,BrowserRouter,Link} from 'react-router-dom'
    //将BrowserRouter重命名为Router
    import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
    import { Button } from 'antd';
    import './App.css';
    
    function Home()
    {
      return(
          <div>admin首页</div>
        )
    }
    
    function Me(props)
    {
      console.log(props)
      return(
          <div>admin我的</div>
        )
    }
    
    function Product(props)
    {
      return(
          <div>admin产品页面:{props.match.params.id}</div>
        )
    }
    
    export default class App extends Component{
    	  constructor()
        {
          super();
        }
        render()
        {
        {/*若将路径写成对象形式,且和下面相同,会自动将pathname、search、hash自动拼接在url路径上,state为传入组件的数据*/}
          let obj={pathname:"/me",search:'?username=admin',hash:"#abc",state:{msg:'hello'}}
          return(
            <div id='app'>
          {/*BrowserRouter可以放多个*/}
              <Router>
            
            {/*因为组件也是返回html内容,故可以直接通过函数返回html内容充当组件,但不能直接写html内容*/}
              <div>  
                <Route path="/"  exact component={()=><div>首页</div>}></Route>
                <Route path="/product"  component={()=><div>product</div>}></Route>
                <Route path="/me"  component={()=><div>me</div>}></Route>
              </div>
              {/*<Route path="/" component={function(){return <div>首页2</div>}}></Route>*/}
    
              </Router>
            
    
              
              {/*BrowserRouter内部只能有一个根容器,包裹其他内容*/}
            {/*添加basename='/xx'后,点击Link跳转其他路由时,url会将/xx添加到路由名前,所以使用路由路径和加了admin的路由路径都能匹配该路由*/}
              <Router basename='/admin'>
                <div>
                    <div className='nav'>
                        <Link to='/'>Home</Link>
                        <Link to='/product/123'>Product</Link>
                      {/*可在对应的组件中输出props查看传入的对象的信息,添加replace将跳转前的上一个页面替换成当前页面,只将当前页面入栈*/}
                        <Link to={obj} replace>个人中心</Link>
                    </div>
    
                    <Route path="/" exact component={Home}></Route>
                    <Route path="/product/:id"  component={Product}></Route>
                    <Route path="/me" exact component={Me}></Route>
                </div>
              </Router>
    
            </div>
            
          )
        }
    
    }
    
    展开全文
  • 首先 导航链接应该使用NavLink而不再是Link NavLink使用方法见https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md NavLink和PureComponent一起使用的...
  • React-3】添加属性

    2018-12-11 19:39:42
    &lt;!...gt; &lt;... Learning React.js &lt;/title&gt; &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.
  • 我封装了一个简单的实现react里自定义Link的方法,方便大家使用。 因为普通组件没有metch、location、history等属性。只有<Router>里面的<component>渲染的组件才有那三个属性。所以我定义了一个...
  • Facebook对react进行持续的改进,路由作为其中最重要的一部分,4.0版本对其进行了大量的优化,总的来说,简单易用! 之前使用react路由的时候,我们引入的是react-router包。 现在改版之后,我们引入的包是react...
  • react-router原理之路径匹配一文讲了react-router如何根据url进行路径匹配进而完成不同的组件渲染。接下来继续讲一下如何改变url。仍旧以官网为例,演示地址 const BasicExample = () =&gt; ( &lt;Router...
  • 使用react-router时候,我们常常会使用其自带的路径跳转组件Link,通过实现跳转,这和传统的何其相似!但它们到底有什么具体的区别呢? 对比,Link组件避免了不必要的重渲染 A -- 通过标签实现页面跳转:(图的...
  • React 标签和属性支持

    2016-03-04 13:54:06
    来源React 尝试支持所用常用的元素。一、HTML 元素下列的 HTML 元素是被支持的:a abbr address area article aside audio b base bdi bdo big blockquote body br button canvas caption cite code col colgroup ...
  • 故事:刚开始学习react时候 会傻傻分不清props和state,导致开发的时候 遇到问题就会很蒙蔽如果你觉得还是搞不清 state 和 props 的使用场景,那么请记住一个简单的规则:尽量少地用 state,尽量多地用 props。...
  • 在React中, 所有的DOM属性包括事件绑定都要使用托蜂命名法,比如tabindex在React中就变成了tabIndex,同时需要显示DOM的属性需要用这两个前缀而且必须是小写,aria-*和data-*1.一些特殊的DOM属性在React中的处理 ...
  • 以前知道react 组件新增属性可以用…解构对象直接放进去,但是这样加判断进去也是第一次用 <Button type="link" {...{ "disabled": row.lineStatus == 2 ? true : false }} onClick={() => row.lineStatus ...
  • React + Redux + node.js 的项目 之前遇到类似的问题,是这种情况: 用 withRouter() 解决 Blocked Updates Generally, React Router and Redux work just fine together. Occasionally though, an app can ...
  • 原生Link组件用法 <Router> <Link to='/'>Home</Link> <Link to='/about'>About</Link> <Link to='/mine'>Mine</Link> <div> <Route component={Home} ...
  • vue根本就没有这个烦恼,因为vue已经帮我们封装好了。而react使用NavLink或者Link的时候默认是a标签,并没有给我们提供相应的tag方法,可有时候我们就是想要其他的标签怎么办,就需要我们自己手动来封装了,这也...
1 2 3 4 5 ... 20
收藏数 8,400
精华内容 3,360