React-Router 介绍及使用

Posted 2023-04-15

参考技术A React-Router 4.0 版本之前安装

React-Router 4.0 版本之后安装

在React-Router 4.0 开始，官方提供一个基础的路由 react-router 。

目前使用的版本

获取path的参数

Route里面 component 和 render 这两个属性的使用：

<Link /> 里面的 to 属性是一个对象， 比如：传递一个基本的 location 对象也可以在后面加上传递其他的对象, 这些对象值都可以通过 props 获取这里面的参数

<NavLink> 是 <Link> 的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有：

Switch 意义：

这个 to 属性也可以是一个对象

<Redirect /> 里面的 from 属性：

例如：

如果我访问 http://localhost:3000/old/admin/tabs/7 ，那么就会配 from 里面 /old/admin/tabs/:number 匹配到，然后会重定向到 /admin/ui/tabs/:number 。那么我 to 属性想拿到 from 里面的 path 参数，那么 to 里面也要加上相应的参数(也就是 :number )

https://reacttraining.com/react-router/web/example/basic

react-router简明学习

前面的话

　　路由用来分发请求。后端是提供服务的，所以它的路由是在找controller，前端是显示页面的，所以它的路由是在找component。本文将详细介绍react-router-dom的内容

 

Router

　　Router是路由器组件的低阶接口，通常会使用如下某个高阶router来替代它

<BrowserRouter>
<HashRouter>
<MemoryRouter>
<NativeRouter>
<StaticRouter>

【BrowserRouter】

　　最常用的是BrowserRouter

import { BrowserRouter } from ‘react-router-dom‘

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App/>
</BrowserRouter>

　　1、basename: 当前位置的基准 URL。如果页面部署在服务器的二级（子）目录，需要将 basename 设置到此子目录。 正确的 URL 格式是前面有一个前导斜杠，但不能有尾部斜杠

<BrowserRouter basename="/calendar"/>

　　2、getUserConfirmation：当导航需要确认时执行的函数。默认使用 window.confirm

// 使用默认的确认函数
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation}/>

　　3、forceRefresh：当设置为 true 时，在导航的过程中整个页面将会刷新。 只有当浏览器不支持 HTML5 的 history API 时，才设置为 true

const supportsHistory = ‘pushState‘ in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>

　　4、keyLength：location.key 的长度。默认是 6

<BrowserRouter keyLength={12}/>

　　5、BrowserRouter只能渲染单一子元素

 

Route

　　Route是react-router中最重要的组件，用来匹配请求并渲染相应组件

　　1、path 路径的匹配值，可以包括以下几种特殊符号

:paramName – 匹配一段位于 /、? 或 # 之后的 URL。 命中的部分将被作为一个参数
() – 在它内部的内容被认为是可选的
* – 匹配任意字符（非贪婪的）直到命中下一个字符或者整个 URL 的末尾，并创建一个 splat 参数

　　例子如下所示：

<Route path="/hello/:name">         // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)">       // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path="/files/*.*">           // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg

　　2、component 要显示的组件

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

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

　　3、render 函数中return的值就是要显示的内容

<Route path="/home" render={() => <div>Home</div>}/>

　　4、children 与render的区别在于，不管有没有匹配，都想显示的内容

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? ‘active‘ : ‘‘}>
      <Link to={to} {...rest}/>
    </li>
  )}/>
)

　　[注意]component/render/children只能三个选一个使用

【匹配规则】

　　默认地，路由进行宽松匹配。在下面例子中，路由匹配到/one时，既显示组件A，也显示组件B

<Route  path="/one" component={A}/>
<Route  path="/one/two" component={B}/>

　　如果要进行确切匹配，则需要添加exact属性。这样，路由匹配到/one时，只显示组件A

<Route  exact path="/one" component={A}/>
<Route  path="/one/two" component={B}/>

　　还有一种是严格匹配，即斜杠也必须严格匹配。下面例子中，路由匹配到/one/时，会显示组件A，但匹配到/one时，什么都不会显示

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

　　[注意]严格匹配并不是确切匹配。下面例子中，路由匹配到/one时，即显示组件A，也显示组件B

<Route  strict path="/one" component={A}/>
<Route  path="/one/two" component={B}/>

　　如果要确切匹配，则需要

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

　　但是，一般地，strict属性很少使用

【属性】

　　Route默认携带三个props：包括match、location、history

　　如果使用component，则使用this.props来获取，如果是render，则在回调函数中使用参数(props)=>{}来获取

　　1、match

　　match包括以下属性

params 键值对
isExact 是否确切匹配
path 路径中设置的值
url URL中的path值

　　2、location

　　location中包含如下属性

　　[注意]直接访问location，而不是访问history.location

{
  key: ‘ac3df4‘, // not with HashHistory!
  pathname: ‘/somewhere‘
  search: ‘?some=search-string‘,
  hash: ‘#howdy‘,
  state: {
    [userDefined]: true
  }
}

　　通过Link传递的state，可以在location中获取到

　　[注意]刚开始时，或者直接刷新浏览器，state是没有值的，只有跳转到该链接时，state才有值。再后来，刷新也有值了

　　3、history

　　history包含如下属性

length: history栈的长度
action: 当前的action
location: 当前的location对象

　　history包含如下方法

push()
goBack() = go(-1)
goForward() = go(1)
go() 跳转到 history栈中的哪个enter
replace(path, [state]) 替换history栈中的当前entry
push(path, [state])  添加当前entry到history栈中

 

Redirect

　　Redirect将页面导航到新位置，新位置将覆盖history栈中的当前位置，类似于服务器端的重定向(HTTP 3xx)

　　to属性可以是一个字符串，表示跳转的地址

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

　　to属性也可以是一个对象

<Redirect to={{
  pathname: ‘/login‘,
  search: ‘?utm=your+face‘,
  state: { referrer: currentLocation }
}}/>

　　push属性为true时，表示添加新记录到history栈中，而不是替换当前记录

<Redirect push to="/somewhere/else"/>

 

Link

　　Link是对a标签的封装，提供无刷新的页面跳转。Link标签主要的属性是to属性

　　1、一般地，to是一个字符串

<Link to="/about">关于</Link>

　　2、也可以写成对象的形式

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

　　[注意]在Link里的子组件或同组件的点击事件，最好加上阻止默认行为和阻止冒泡

<Link>
  <div onclick={}></div>
</Link>
<Link onclick={}>

【NavLink】

　　NavLink相对于Link来说，增加了一些样式属性

　　activeClassName表示被匹配的a标签的样式名；activeStyle表示被匹配的a标签的样式

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: ‘bold‘,
    color: ‘red‘
   }}
>FAQs</NavLink>

 

Switch

　　渲染Route或Redirect匹配到的第一个子元素

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

　　[注意]switch必须直接包括Route，中间不可包含div，否则不生效