React路由 + 绝对路径引用
路由:
哈希路由(在url地址后加 #name)
// 实现页面监听window.onhashchange = function(){console.log(‘hash:’,window.location.hash)}
H5路由(history.pushState(‘起的名字’, ‘title字段’, ‘跳转的地址’))
H5路由高级的地方就是可以跳转一个hash值,也可以跳转一个路径,且跳转路径时页面不会刷新
// 实现页面监听window.onpopstate = function (e) {console.log(‘H5:’, window.location.pathname)}
还有一个特殊的 history.replaceState,它和 history.pushState 调用方式一样。唯一的区别是pushState是在历史记录栈推送一条记录,而replaceState是替换当前的历史记录栈,不会更改其他的历史记录。
React和路由相关的元素:
// 哈希路由 <HashRouter>// H5路由 <BrowserRouter>// 路由规则 <Route>// 路由选项 <Switch>// 跳转导航 <Link> || <NavLink>// 自动跳转 <Redirect>
绝对路径的引用
相信很多童鞋在React中出现过引用过长的问题
举个?: import Api from '../../../../Api'
这还只是其中一个文件,我们项目中有N多个文件,有些文件层次不一样,这样就很容易引起混乱(何况是我这样的眼盲,数都数懵逼了ing...)
1、打开 webpack.config.dev.js & webpack.config.prod.js 文件
2、找到 alias 这个字段,在其已有属性字段下添加
// 绝对路径的引用 '@': path.resolve(__dirname, '链接Scr的路径'), // 这样如果再调用Src下的Api文件的话,就可直接 import Api from '@/src' // 少侠留步,如果还想偷懒,老衲也可以给你看看下面....
'component': path.resolve(__dirname, '链接component的路径,例:../src/component'),
ok,请少侠重启服务运行下试试,是不是突然感到 菊花一紧 眼睛一亮 ?这样写的话就很方便了有木有?写法统一,易于理解,也不用费劲一层一层网上扒了。( 此处应该有掌声... )
等等,也许有些用create-react-app创建项目的少侠看到这里才突然发现。我曹。我特么 webpack.config.dev.js & webpack.config.prod.js 文件呢?
少侠莫急
如果用create-react-app创建的项目,这兄弟俩默认是藏在 node_modules 下的 script-react 里面,这时候少侠又纳闷了,这么多文件我该怎么找?
少侠请附耳过来,老衲教少侠一句咒语。
npm run eject
少侠请看根目录是不是多了一个config文件?这哥俩就在这里藏着呢,去大胆配置吧。
安装Eslint时候抛出警告
Eslint大家应该都熟悉,可是在React项目在安装Eslint的时候总是抛出一个警告,虽然无关紧要,但是在不少强迫症骚年的眼里简直要命呀。
Definition for rule 'jsx-a11y/href-no-hash' was not found jsx-a11y/href-no-hash(就是这厮)
npm install --save-dev eslint-config-airbnb eslint@^2.9.0 eslint-plugin-jsx-a11y@^1.2.0 eslint-plugin-import@^1.7.0 eslint-plugin-react@^5.0.1
好了,后续还有一系列小纪会分享给大家,如果对各位少侠有所帮助,请关注本微博,或者关注本人的个人公众号,如果有什么问题,也欢迎大家发私信给我。
转载于:https://www.cnblogs.com/icaihua/p/9869846.html
React路由 + 绝对路径引用相关推荐
- react webpack配置组件路径引用 @与自定义
暴露配置文件: create-react-app 生成的项目看不到 webpack 相关的配置文件,需要先暴露出来,使用如下命令 npm run eject 修改配置文件: webpack.confi ...
- RN和React路由详解及对比
前言 在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换.下面会对比一下react路由和RN路由的本质区别和使用方法. 路由(routing)是 ...
- rn php,RN和React路由详解及对比
前言 在平时H5或者RN开发时,我们业务场景中大部分都不是单页面的需求,那这时我们就能使用路由在进行多页面的切换.下面会对比一下react路由和RN路由的本质区别和使用方法. 路由(routing)是 ...
- React 路由 封装
React 路由 封装 主要目录 路由列表 在App.jsx页面引用路由组件 注意 鸽了一段时间,终于回归React的阵营中,后面会完整制作一个项目,今天先讲一下路由,后续会和项目一并讲解. 主要目录 ...
- [译] React 路由和 React 组件的爱恨情仇
原文地址:The Love-Hate Relationship between React Router and React Components 原文作者:Kasra 译文出自:掘金翻译计划 本文永 ...
- 16、React系列之 React 路由
版权声明:本文为博主原创文章,未经博主允许不得转载. PS:转载请注明出处 作者:TigerChain 地址:http://www.jianshu.com/p/b55cf53e633a 本文出自 Ti ...
- react 路由配置以及封装
react 路由配置以及封装 1.新建App.tsx文件 import React, { Component } from 'react' import IsRouter from './router ...
- react路由:路由传参params、search、state
react路由:路由传参params.search.state(含二级路由和三级路由) 一.准备工作: 1.创建myProject05-router目录 2.创建清单文件, npm init ...
- 【react全家桶】react路由
react路由 5.1. 路由的简介 5.2 路由的基本使用 5.3 路由组件与一般组件 5.4 NavLink及其封装 5.5 Switch 5.6 路由的模糊匹配与严格匹配 5.7 Redirec ...
最新文章
- 【转】首先为人编写程序,其次才是计算机
- Android开发工具之Android Studio-合并主干和分支代码
- 【推荐系统】深入理解推荐系统:无需人工特征工程的xDeepFM
- python怎么编程输入坐标_python编程之API入门: (一)使用百度地图API查地理坐标...
- 正则表达式的环视深度剖析
- Android中简单的日期格式化
- 转:[C/C++]2014年7月华为校招机试真题(一)
- C++笔记-DLL的编写与调用
- centos 字体的修改
- 考清华计算机研究生数学看什么,一位考上清华计算机研究生的悲壮历程(数学考了满分).doc...
- redis批量删除指定的key
- matlab中的count函数,Excel 中COUNT函数的使用详解,详情介绍
- Python 一个无限 重复生成器的实现 和一个简洁的 quicksort
- MSP430FR6989系列教程之PWM波
- 常见移动端兼容性问题
- echarts 实现自定义tooltip提示框浮层内容显示
- Android下磁盘分区表损坏,硬盘分区表丢失错误怎么修复TestDisk使用教程
- 计算机不能共享怎么设置,win7无法共享文件夹 共享文件设置不了共享怎么办?...
- 从生活角度学习c++
- java 列表伸缩,微服务实例自动弹性伸缩实践