前端知识库Reactjs基础系列四react-router

简介: 在开发spa项目中,前端路由是一个无法绕开的技术,在整个spa前端架构中我觉的掌握前端路由配置,状态管理以及异步请求的封装是最基本的能力。本文主要介绍react-router对于react项目的作用,以及基本配置。

前言


在开发spa项目中,前端路由是一个无法绕开的技术,在整个spa前端架构中我觉的掌握前端路由配置,状态管理以及异步请求的封装是最基本的能力。本文主要介绍react-router对于react项目的作用,以及基本配置。 注:本文主要以react-router v4为基础 简单的介绍下

reactjs路由作用

React Router 是完整的 React 路由解决方案。他满足了reactjs项目对于路由的大部分 需求,特点如下:

  • 有简单的 API 与强大的功能
  • 实现代码缓冲加载
  • 动态路由匹配
  • 路由导航(路由拦截)
  • 以及建立正确的位置过渡处理。

react router详解

reacter-router v3.x

路由结构组成

  • 路由组件:Router
  • 路由匹配组件:Route
  • 路由导航组件:Link

主要api详解

  • Router: 能保持 UI 和 URL 的同步,其主要属性children/routes是指一个或多个的 Route 或 PlainRoute
<Router routes={...}>
   ...
</Router>
  • Route: 声明路由映射到应用的组件层,其path属性用来直接路由,component用来匹配URL时的组件也可以用components匹配多个组件
<Route path="/route" component={App}></Route>
  • IndexRoute: 为父 route 提供一个默认的 "child"
  • IndexRedirect: 从一个父 route 的 URL 重定向到其他 route
  • Link:以适当的 href 去渲染一个可访问的锚标签。
<Link to={`/users/list`} activeClassName="active">{user.name}</Link>
  • browserHistory: 用来实现组件的外部跳转
import { browserHistory } from 'react-router'
  browserHistory.push('/path')
  • onEnter(进入)和 onLeave(离开) 在页面跳转确认时触发一次
//replaceState控制路由跳转
         onEnter: function (nextState, replaceState) {
              replaceState(null, '...')
            }

基本配置

  • 嵌套型语法实现
import React from 'react'
import { Router, Route, Link } from 'react-router'
import BasicLayout from './components/BasicLayout'
React.render((
  <Router>
    <Route path="/" component={BasicLayout}>
      <Route path="about" component={About} />
      <Route path="inbox" component={Inbox}>
        <Route path="children/:id" component={Children2} />
      </Route>
    </Route>
  </Router>
), document.body)

//基础页面组件

const BasicLayout = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})
  • 原生数组对象配置实现
const routes = [
  { 
    //路由对应的路径
    path: '/',
    //渲染的组件
    component: App,
    indexRoute: { component: Dashboard },
    //路由拦截
    onEnter: function (nextState, replaceState) {
              replaceState(null, '...')
            }
    // 子路由
    childRoutes: [
      //同父路由配置文件
      { path: 'about', component: About },
      { path: 'inbox',
        component: Inbox,
        childRoutes: [
          //同父路由配置文件
          { path: '/messages/:id', component: Message },
          { path: 'messages/:id',
            onEnter: function (nextState, replaceState) {
              replaceState(null, '/messages/' + nextState.params.id)
            }
          }
        ]
      }
    ]
  }
]
React.render(<Router routes={routes} />, document.body)

react-router ~v4.x

路由结构组成

  • 路由组件:BrowserRouter和HashRouter
  • 路由匹配组件:Switch 和 Route
  • 路由导航组件:Link

主要api详解

  • BrowserRouter和HashRouter两种路由模式跟router3中的history 和 hash一个意思
import {
  BrowserRouter as Router
} from "react-router-dom";
export default function BasicExample() {
  return (
  <Router>
   .....
  </Router>
  )}
  • Switch  渲染第一个被location匹配到的并且作为子元素的或者
<Switch>
    /
     <Route exact path="/">
      <Home />
     </Route>
 </Switch>
  • Route 官方文档给出 Its most basic responsibility is to render some UI when its path matches the current URL。即子组件会被渲染到  注:V4 中的 routes 默认是 inclusive 的,这就意味着多个  可以同时匹配 和呈现,如果只匹配一个则需要用switch来实现。
<Route exact path="/">
      <Home />
     </Route>
  • Link:提供应用程序周围的声明式、可访问的导航。

基本配置

...待续

react-router v3和v4对比

v3:路由是配置处理

  • 路由集中在一处;
  • 布局和页面的层叠由层叠的  组件控制;
  • 布局和页面组件是路由的一部分

~v4:只是组件

  • 分布式路由管理
  • 匹配原则:包容性和排他性
  • 路由存在布局和ui之间
  • 适配了移动应用端

总结


对于spa为基础的项目前端路由是必备功能之一,在react-router中v4之后和v4之后的版本差距是比较大的,如果之前没接触过react用的是vue,建议先使用v4之前的版本,因为他与vue-router的路由定义基本相同,都是集中管理,这样你上手react项目会很快。如果一直用react开发并且用的是v4之前建议尝试下v4,刚开始会很难接受,之后你会有意想不到的惊喜。


相关文章
|
2月前
|
前端开发 JavaScript API
阿珊比较Vue和React:两大前端框架的较量
阿珊比较Vue和React:两大前端框架的较量
|
2月前
|
前端开发 测试技术 开发工具
探索前端框架React Hooks的优势与应用
本文将深入探讨前端框架React Hooks的优势与应用。通过分析React Hooks的特性以及实际应用案例,帮助读者更好地理解和运用这一现代化的前端开发工具。
|
2月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
2天前
|
存储 前端开发 JavaScript
前端框架与库 - React基础:组件、Props、State
【7月更文挑战第12天】React是JavaScript库,专注UI构建,基于组件化。组件是UI模块,可函数式或类定义。Props是组件间安全传递数据的只读参数,用defaultProps和propTypes保证正确性。State则是组件内部可变数据,用于驱动更新。使用setState()确保正确变更和渲染。了解并妥善处理这些概念是高效React开发的基础。
|
1天前
|
前端开发 JavaScript 开发者
前端框架与库 - React生命周期与Hooks
【7月更文挑战第13天】React 框架革新UI构建,引入Hooks简化组件状态管理和副作用处理。组件生命周期涉及挂载、更新、卸载,对应不同方法,如`componentDidMount`、`shouldComponentUpdate`等,但现在推荐使用`useState`和`useEffect` Hooks。`useEffect`处理副作用,需注意清理和依赖数组。避免问题的关键在于正确使用Hooks和理解其工作模式,以构建高效应用。
|
9天前
|
前端开发
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
14 1
|
12天前
|
前端开发 JavaScript 数据管理
前端框架对比:React、Vue与Angular
【7月更文挑战第2天】React、Vue和Angular是前端三大框架,各有特色。React以组件化和虚拟DOM著称,适合大型SPA;Vue轻量且易用,适用于快速开发;Angular是全面解决方案,适合复杂应用,但学习成本高。选择取决于项目需求和团队技能。
|
17天前
|
前端开发 JavaScript 开发者
探索现代前端框架:从React到Vue.js
【6月更文挑战第26天】在数字时代的浪潮中,前端框架如同建筑的基石,支撑着互联网界面的创新与发展。本文将带领读者穿梭于React与Vue.js这两个最受欢迎的前端框架之间,揭示它们的核心特性、设计理念以及在实际开发中的应用差异。通过比较分析,我们将理解每个框架的优势和局限,并探索如何根据项目需求作出明智的选择。加入我们,一起深入前端技术的瑰丽世界,发现构建未来网络界面的无限可能。
|
18天前
|
前端开发 JavaScript 数据管理
引领潮流:React框架在前端开发中的革新与实践
React,始于2013年,由Facebook驱动,以其组件化、Virtual DOM、单向数据流和Hooks改革前端。组件化拆分UI,提升代码复用;Virtual DOM优化渲染性能;Hooks简化无类组件的状态管理。庞大的生态系统,包括Redux、React Router等库,支持各种需求。例如,`useState` Hook在计数器应用中实现状态更新,展示React的实用性。React现已成为现代Web开发的首选框架。【6月更文挑战第24天】
91 2
|
28天前
|
前端开发 JavaScript 测试技术
Jest与React Testing Library:前端测试的最佳实践
Jest和React Testing Library是React应用测试的核心工具。安装相关依赖后,在`jest.config.js`中配置Jest。测试时,编写描述性测试用例,使用`render`、`fireEvent`和`screen`来检查组件行为。Jest提供模拟功能,如模拟API调用。测试组件交互性时,模拟用户行为并验证状态变化。确保覆盖边缘情况,使用代码覆盖率报告评估测试完整性,并将测试集成到CI流程中。
19 1