react router入坑指南

对于web页面, 无论是使用Jquery, 还是使用React, 都会用到页面跳转功能, 很多都使用location跳转

image.png


但如果使用 React + Redux 的话, 这样的跳转就相当于页面跳出, 会重新加载css/js, 而且前一个页面的状态(store里面存的state就清空为默认状态了)就没了, 这导致两个问题:

1. 想要获取前一个页面的状态无法获取,

2. 按后退按键, 返回前一个页面, 那个页面也要重新加载css/js/数据


这显然不是我们想要的, 也就不是纯属的单页面应用了.


对于这种情况我们就要用到react-router-dom了

React-router-dom提供了<BrowserRouter>, <Link>等组件,我们可以通过dom类组件控制路由。


组件

<Route>

<Route> 也许是 RR4 中最重要的组件了,它最基本的功能就是当页面的访问地址与 Route 上的 path 匹配时,就渲染出对应的 UI 界面。


<Route> 自带三个 render method 和三个 props 。

1  .render methods 分别是:   <Route component> <Route render> <Route children>

     每种 render method 都有不同的应用场景,同一个<Route>应该只使用一种 render method ,大部分情况下使用component。

2 .props 分别是:match location history     所有的 render method  都将被传入这些 props。

3  path: string   有效 URL 路径 

exact: bool
如果为 true,path 为 '/one' 的路由将不能匹配 '/one/two',反之,亦然。

strict: bool
对路径末尾斜杠的匹配。如果为 true。path 为 '/one/' 将不能匹配 '/one' 但可以匹配 '/one/two'。

如果要确保路由没有末尾斜杠,那么 strict 和
exact 都必须同时为 true


image.png

<Link>

属性

 to: string

作用:跳转到指定路径

使用场景:如果只是单纯的跳转就直接用字符串形式的路径。

to: object

作用:携带参数跳转到指定路径

作用场景:比如你点击的这个链接将要跳转的页面需要展示此链接对应的内容,又比如这是个支付跳转,需要把商品的价格等信息传递过去

replace: bool

为 true 时,点击链接后将使用新地址替换掉上一次访问的地址 (适用于选项卡操作)

为 false 时,点击链接后将在原有访问历史记录的基础上添加一个新的纪录。默认为 false

<NavLink>

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

activeClassName(string):设置选中样式,默认值为 active;

activeStyle(object):当元素被选中时, 为此元素添加样式;

exact(bool):为 true 时, 只有当地址完全匹配 class 和 style 才会应用;

strict(bool):为 true 时,在确定位置是否与当前 URL 匹配时,将考虑位置 pathname 后的斜线;

isActive(func):判断链接是否激活的额外逻辑的功能;

image.png

<Switch>

渲染第一个被location匹配到的并且作为子元素的<Route>或者<Redirect>

使用<Switch>包裹和直接用一打<Route>s有什么区别呢?

  <Switch>是唯一的因为它仅仅只会渲染一个路径。相比之下(不使用<Switch>包裹的情况下),每一个被location匹配到的<Route>将都会被渲染。

有一篇文章用了一个很好的例子解释了一下

react-router v4 之 啥是<Switch>

image.png


使用JS控制路由跳转

withRouter

 使用 history 控制路由跳转

image.png

当使用redux    

image.png

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容