• 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匹配的时候,使用的样式

  • 相关阅读:
    C#如何释放未托管资源
    C# 如何将一个List转换为只读的
    【转载】所谓爱情不是一个人的事情(爱情不完全手册)
    vbs SendKey 用法 Sendkey 键盘对应的码表
    PowerShell签名和执行策略
    IDisposable接口和析构函数的联合使用
    [读报]2009中国基金业明星基金奖揭晓
    【读书笔记】泛型接口 和 泛型方法
    C# 反射(转)
    设计模式详解——装饰者模式
  • 原文地址:https://www.cnblogs.com/kugeliu/p/7240179.html
Copyright © 2020-2023  润新知