React路由<3> | 青训营笔记

兰陵笑笑生0
135 阅读4分钟

415f82b9ly1ft7ds63pifj203f048glu (1).jpg

这是我参与「第四届青训营」笔记创作活动的的第六天\color{CornflowerBlue}这是我参与「第四届青训营」笔记创作活动的的第六天
伴随着青训营项目的推进，小编狂补react知识，接下来我就react路由以及组件展开讨论。文章内容如有不对，请各位看官多多指正，非常感谢。

文章目录

一、NavLink的使用及封装

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

属性属性说明
activeClassName(string)设置选中样式，默认值为active
activeStyle(object)当元素被选中时，为此元素添加样式
exact(bool)为true时，只有当导致和完全匹配class和style才会应用
strict(bool)为true时，在确定为位置是否与当前url匹配时，将考虑位置pathname后的斜线
isActive(func)判断链接是否激活额外逻辑的功能
......

 1. 引入NavLink

import { NavLink } from 'react-route-dom'

 2. activeClassName: string

// 当被激活时，显示类名为selected的css样式
<NavLink  to="/demo"  activeClassName="selected">
  Demo
</NavLink>

 3. activeStyle: object

<NavLink to="/demo" activeStyle={{ fontWeight: "bold", color: "red" }} >
  Demo
</NavLink>

 4. exact：精确匹配

//仅当url与NavLink里to的值完全相等时，才应用类名为selected的CSS样式
<NavLink exact to="/demo" activeClassName="selected">
  Demo
</NavLink>

 5. isActive：function
  用于添加额外逻辑以确定链接是否处于活动状态的功能。

//如果要做的不仅仅是 验证链接的路径名 是否与 当前URL 匹配，那么应该使用此方法
const oddEvent = (match, location) => {
  if(!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}
<NavLink to="/events/123" isActive={oddEvent} >
  Event 123
</NavLink>

 6. 二次封装NavLink
  若使用多个NavLink，并且属性相同，则会导致大量代码重复冗余。因此我们能够自己二次封装一个MyNavLink。

export default class MyNavLink extends Component {
   render() {
       return (
         <NavLink activeClassName="xxx" {...this.props} />;
       )
   }
}

注：通过this.props.children可以获取标签体内容

二、Switch的使用

  1. 通常情况下，path和component是一一对应的关系。
  2. Switch可以提高路由匹配效率(单一匹配)，匹配成功后，就不继续往下遍历。
  3. 使用<Switch></Switch>标签将包裹起来
<MyNavLink to="/demo1">Demo1</MyNavLink>
<MyNavLink to="/demo2">Demo2</MyNavLink>

<Switch>
   <Route path="/demo1" component={Demo1} />
   <Route path="/demo2" component={Demo2} />      //匹配成功这个之后便不会继续往下遍历/demo2
   <Route path="/demo2" component={Demo3} />      //不会展示出来
</Switch>

三、解决多级路径刷新页面样式丢失问题

  1. public/index.html中引入样式时不写./，写/（常用）
  2. public/index.html中引入样式时不写./，写%PUBLIC_URL%(常用，只不过这种写法只适用于react脚手架)
  3. 使用HashRouter

四、路由的模糊匹配和严格匹配

  1. 默认使用的是模糊匹配(输入的路径必须包含要匹配的路径，且顺序要一致)
<MyNavLink to="/demo/a/b">Demo</MyNavLink>
//<MyNavLink to="/a/demo/b">Demo</MyNavLink>     错误写法
<Route path="/demo" component={Demo} />
  1. 开启严格匹配：
<Route exact={true} path="/demo" component={Demo}/>
  1. 严格匹配不要随便开启，需要再开。有些时候开启会导致无法继续匹配二级路由

五、Redirect的使用

 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由。

<Switch>
   <Route path="/about" component={About} />
   <Route path="/home" component={Home} />
   <Redirect to="/home" />
</Switch>

 Redirect与Transfer的区别
  在跟视频学习的过程中，总觉得自己学的很浅薄，在阅读其他博客的时候发现一篇深究页面跳转Transfer与Redirect的区别。([转]页面跳转Transfer与Redirect的区别你知道吗？(cnblogs.com))。与大家共同学习。

总结

  • 知识点学了归学了，但是实操则是另一码事，在一个项目中对这些细节的处理，知识点的运用又是另一个层次。
  • 记得教软件工程的老师跟我说过，大致内容是：一个软件的用户人群大致能画成一个菱形，中间那大部分则是中规中矩的用户，他们的需求相对来说很容易满足，也会遵守开发人员的规定(比如你设置账户必须是字母和数字组成)；但是往往最麻烦的是菱形的上下两角，这群用户就比较皮，他们偏偏就要和开发人员对着干(比如我设置账户就要&*……%￥乱输一通，就好像打王者时，我们会偶尔看见违规昵称，一大串很长的字符串)，开发人员往往就要花大量时间和编写大量代码去解决这些问题。所以在一个项目中，不要抱有侥幸心理，在每个需求方面都要尽可能的想的全面一些，这样也方便减轻后期维护的压力。
  • 同是寒窗苦读，怎愿甘拜下风。
avatar
文章
阅读
粉丝