zoukankan      html  css  js  c++  java
  • react-router 4.0版本学习笔记

    Router

    所有路由组件的底层接口,一般情况都不使用,而是使用更加高级的路由。

    最常用的有两种<BrowserRouter>、<HashRouter>

    <BrowserRouter>: 使用H5提供的history API来保持UI和URL同步。这个路由会对后台获取真实的url地址造成影响。

    <HashRouter>: 使用URL的hash来保持UI和URL同步。拥有不同风格的hash来划分url和react路由地址。

    Route 

    匹配url地址,渲染相应的组件。

    参数 exact: 当值为true时,则要求路径与location.pathname必须完全匹配;

     参数 strict: 当设为true的时候,有结尾斜线的路径只能匹配有斜线的location.pathname,这个值并不会对location.pathname中有其他的片段有影响;

    match(路由参数)

    params: 通过解析URL地址当中动态获取的参数

    isExact: 当值为true的时候,整个URL地址都需要匹配

    path: 匹配的路径格式

    url: URL匹配的部分

    获取:

    在组件当中 this.props.match 获取

    render和children   通过 ({match}) = > {}

    location(路由参数)

    pathname: 即将前往的路径

    history(路由参数)

    length: 堆栈数量

    action: 当前动作,push、pop、replace, 前往、后台,替代

    location: URL 路径 => pathname: URL路径;  search: 查询字符串; hash: URL的hash分段;

    方法:

    push() 在路由堆栈当中新增条目

    replace() 堆栈当中的当前条目

    go() 将堆栈向前/后推

    goBack() => go(-1);

    goForward() => go(1);

    block() = > 阻止跳转

    <Link > : 进行路径跳转

    to: 需要跳转的路径

    replace: 当他为true时,路由变换会替换当前的路由

    <NavLink>: 是link的一个特定版本,可以添加样式参数

    activeClassName: 当与当前url匹配的时候,使用的类名

    activeStyle: 当与当前url匹配的时候,使用的样式

  • 相关阅读:
    spring配置详解
    表单重复提交解决办法
    Java 两个变量交换值
    spring @ExceptionHandler注解方式实现异常统一处理
    mybatis实战
    使用soapui调用webservice接口
    使用火狐的restclient发送http接口post及get请求
    很多网站301重定向
    邮件发布google blogger 博客
    php file取重复
  • 原文地址:https://www.cnblogs.com/kugeliu/p/7240179.html
Copyright © 2011-2022 走看看