zoukankan      html  css  js  c++  java
  • React-Router 4 的新玩意儿

    上一个项目用的还是 2.6.1,转眼的功夫 4.0 都发布了,API 变化实在有点大,2.X那套东西不顶用了,老老实实重新看一遍文档,其中有几点需要注意的,拿出来说一说。

    本文只讨论针对浏览器的应用,使用 react-router-dom(在react-router基础上封装了一些高级组件)进行说明。

    1. 关于BrowserRouter

    如果按照原来的使用方式,就掉进第一个坑里了:history不合法。

    用 react-router-dom 中的 <HashRouter>组件代替原来的 <Router> 组件就可以了。

    这是之前2.X版本处理浏览器路由的方式,4.0版本中推荐另一个组件:<BrowserRouter >

    换上<BrowserRouter >之后会出现 2 个问题:

    如果你不是通过服务器启动应用,因为chrome自身的安全机制,在本地环境下根本不能用chrome玩。这个不关键,我本地测试换个浏览器还不行么,本地起个服务器也不麻烦。

    关键问题,刷新就是404。原因很简单,BrowserRouter 和 HashRouter 完全不同,前者利用H5的 history 接口,前台路由就是后台收到的路由,你点到其他页面一刷新,得,根本没这个文件,服务器也很无辜,到底让我渲染个啥?后台也可以简单的解决这个问题:甭管你请求的啥地址,我先把入口文件扔给你。node处理方式如下(需要express):

    app.get('*',(request,response)=>{
    
      response.sendFile(path.resolve(__dirname,'../index.html'))
    
    })

    启动node服务器,通过本机服务器访问,完美解决上面两个问题。

    (<MemoryRouter> 和 <StaticRouter> 分别是非浏览器环境和服务器端渲染用的,在此不做讨论。)

    1. BrowserRouter 里可以存在各种标签。

    原来用惯了2.X的同志们,看到新文档的例子可能会发现这个问题:Router里边不是只能有Route么,怎么什么都有。是的,4.0中 Router 里可以存在各种标签。

    1. 导航连接<NavLink>

    看名字就是导航用的,主要用途就是区分激活的状态,激活时的样式。之前揉柔在Link里的。

    1. 只渲染第一个匹配的组件<Switch>

    一个路由可能同时匹配多个路径,在<Switch>中,只渲染匹配的第一个,其他的放弃。之前这是Router的默认行为,4.0中为什么不默认了呢?答:可以将多个Route组合到页面中。想一想,如果你就是想同时渲染多个组件而不只是第一个呢?很欣慰看到我在2.X中吐槽的问题得到了解决。4.0版本给我最大的感觉就是:他让浏览器更灵活的去渲染页面。

    1. <Route>的渲染方法:

    <Route component>

    <Route render>

    <Route children>

    component和之前2.X的方法相同。

    render可以传个函数避免创建新的React element(内联渲染时使用避免不必要的重载)。

    children使用方式与render一致,只不过无论路由是否匹配都会被渲染。

    exact属性为 true需要路由完全匹配时才渲染组件(之前也是默认行为)。

    1. 三个重要对象:history,location,match

    在 Route component 中,以 this.props.location 的方式获取,

    在 Route render 中,以 ({ location }) => () 的方式获取,

    在 Route children 中,以 ({ location }) => () 的方式获取,

    History match的获取方式类似。

  • 相关阅读:
    19.JavaScript实现一定时长下点击次数
    18.JavaScript实现许愿墙效果
    17.JavaScript实现鼠标右键自定义菜单
    16.JavaScript用setTimeout函数做出计时效果
    15.JavaScript实现放大镜效果
    2-5 数组形状
    2-4 排序
    2-3 arrary数组的数值的计算
    2-2array结构
    2-1Numpy概述
  • 原文地址:https://www.cnblogs.com/lihuanqing/p/6871896.html
Copyright © 2011-2022 走看看