react-router基本知识

最新推荐文章于 2024-07-27 11:38:12 发布

落草为寇的海带王

最新推荐文章于 2024-07-27 11:38:12 发布

阅读量983

点赞数

分类专栏： react-router 文章标签： react

本文链接：https://blog.csdn.net/weixin_39424046/article/details/75451668

版权

react-router 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

作用

让浏览器历史记录功能可用，包括前进后退功能
管理组件的加载
这点用在菜单功能特别好使

原理

使用h5的history接口，来保持ui和url同步

安装

cnpm install react-router-dom

导入

import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'

api

BrowserRouter

路由定义外层配置，配置基本规则
属性
(1) basename
基目录，以/开头，结尾无/
(2) getUserConfirmation
–(略)
(3) forceRefresh
为 true 时，在导航的过程中整个页面将会刷新。（浏览器不支持 HTML5 的 history API 时使用）
(4) keyLength

hashRouter

HashRouter 使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步。

Link

用来定义导航
<Link></Link>

属性

(1) to
指定点击后跳转到（显示）的路径(string)或是地址(object)

//路径
<Link to="/courses"/>

//地址
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>

(2) replace
是否替换源地址（不算一个历史记录），默认false

<Link to="/courses" replace />

NavLink

会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数

MemoryRouter

在内存保存你 “URL” 的历史纪录(并没有对地址栏读写). 在非浏览器或者测试环境比如React Native下很有用

Redirect

渲染的时候将会导航到一个新的地址（location）。这个新的地址（location）将会覆盖在访问历史记录里面的原地址

Route

当location（url）匹配path属性时，渲染指定的组件。
使用有三种渲染内容的方法：
1 component
地址匹配的时候React的组件会被渲染

<Route path="/user/:username" component={User}/>

const User = ({ match }) => {
  return <h1>Hello {match.params.username}!</h1>
}

2 render
内联渲染或包装组件

//行内渲染
<Route path="/home" render={() => <div>Home</div>}/>

3 children
不管地址是否匹配都渲染

属性

(1) path
路径，无则总是匹配
(2) exact
当值为true时，则要求路径与location.pathname必须完全匹配。

<Route exact path="/one" component={About}/>

(3) strict
严格检查 / 结尾

<Route strict path="/one/" component={About}/>

Router

Router是所有路由组件共用的底层接口，一般我们的应用并不会使用这个接口

StaticRouter

从不会改变地址

Switch

渲染匹配地址(location)的第一个或者