聊聊React的路由React-Router、react-router-dom

关于二者的区别

参见：https://github.com/mrdulin/blog/issues/42　　

直接使用react-router-dom好了，react-router-dom封装了react-router，也依赖react-router-dom

BrowserRouter vs HashRouter

import { BrowserRouter as Router } from 'react-router-dom';
// import { HashRouter as Router } from 'react-router-dom';

建议使用BrowserRouter, url类似http://127.0.0.1:8088/api/v1/test，HashRouter慢慢会被废弃，url类似http://127.0.0.1:8088/#/api/v1/test，会自动添加/#

详情参考：https://www.jianshu.com/p/e3adc9b5f75c

为什么我的url输入每次都会自动添加一个#？参见上面

react-router文档

英文：

https://reacttraining.com/react-router/web/guides/quick-start

中文：

https://react-guide.github.io/react-router-cn/docs/Introduction.html

转载于:https://www.cnblogs.com/shengulong/p/10321441.html

聊聊React的路由React-Router、react-router-dom相关推荐

【React+ts】从零开始搭建react函数式组件+router+redux+less+sass+axios反向代理+antd（保姆式教学）
前提你需要准备好node.js版本不低于6.14.8 和 git 文章内容比较长(保姆级别教程),全是干货,请耐心看完通过create-react-app脚手架搭建项目 1.第一步注: 项目名称 ...
【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@+Antd-mobile
一.通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目,可以看到 ...
【React+TS】从零开始搭建react+typescript+router+redux+less+pxToVw自适应+sass+axios反向代理+别名@+Antd-mobile
一.通过create-react-app脚手架创建项目 npx create-react-app testproject --template typescript 在vscode中打开项目,可以看 ...
js路由在php上面使用,React中路由使用详解
这次给大家带来React中路由使用详解,React中路由使用的注意事项有哪些,下面就是实战案例,一起来看一下. 路由通过 URL 映射到对应的功能实现,React 的路由使用要先引入 react-r ...
react实现路由跳转_react实现hash路由
众所周知,目前单页面使用的路由有两种实现方式: hash 模式 history 模式 hash 模式路由原理: 我们先来看hash模式,页面首次加载时需要在load事件中解析初始的URL,从而展示进 ...
react二级路由的两种方法
** react 二级路由配置 ** 1.使用react - router - config包 ①创建一个config.js文件默认导出路由数组 import Home from '../views/ ...
解决React中路由跳转报错:Cannot read property ‘push’ of undefined
React中路由跳转报错: 页面在Router中配置了,但组件无法使用 this.props.history.push() 进行跳转,并且会出现报错:Cannot read property 'pus ...
【React】路由（详解）
目录单页应用程序 SPA: 路由: 前端路由: 后端路由: 路由的基本使用使用步骤常用组件说明 BrowserRouter和HashRouter的区别路由的执行过程默认路由精确匹配 Swi ...
【React】路由详解
文章目录 Router 介绍 Router 原理 Router 安装 Router 使用 Link 和 NavLink Route 属性 path 属性 exact 属性 Route 组件 compo ...
React使用路由跳转时控制台报Cannot update during an existing state transition (such as within `render`)错误
React使用路由跳转时控制台报Cannot update during an existing state transition (such as within render).Render met ...