简单的说一下react路由(逆战班)

现代前端大多数都是SPA(单页面程序),也就是只有一个HTML页面的应用程序,因为它的用户体验更好,对服务器压力更小,所以更受欢迎,为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。

前端 路由的功能:让用户从一个视图(页面)导航到另一个视图(页面)
前端路由是一套映射规则,在React中,是URL路径与组件的对应关系
使用React路由简单来说,就是配置路径和组件
路由的基本使用步骤:

 1 import React from ‘react‘;
 2 import ReactDOM from ‘react-dom‘;
 3 // 1.先安装react-router-dom
 4 // 2.导入BrowserRouter as Router,Route,Link
 5 import {BrowserRouter as Router,Route,Link} from ‘react-router-dom‘
 6 // 路由的基本使用
 7 const First=()=><div>1233</div>
 8 const App=()=>{
 9     return (
10         // 3.使用Router包裹组件元素
11         <Router>
12         <div>
13             <h1>路由基础</h1>
14             {/* 4.使用Link设置路径入口 会被编译为a标签 */}
15             <Link to="/first">页面7</Link>
16             {/* 5.使用Route中path表示路径跳转,component  表示要展示的组件 Route写在哪,展示的内容就渲染在哪 */}
17             <Route path="/first" component={First}></Route>
18         </div>
19         </Router>
20     )
21 }
22 ReactDOM.render(<App />, document.getElementById(‘root‘));

路由中常用组件的说明:

Router组件:包裹整个应用:一个React应用只使用一次
两种常用的Router:HashRouter和BrowserRouter
HashRouter:使用URL的哈希值实现,就是在地址栏的后面有#(localhost:3000/#/sdjdjdj)
推荐使用BrowserRouter:使用H5的historyAPI实现(localhost:3000/djjdd)
Link:组件:用于指定导航链接(a标签) 在浏览器解析时,会将link组件解析成a标签
Router组件:指定路由展示相关的组件信息
路由执行过程:

1.点击link组件(a标签),修改了浏览器地址栏中的url

2.React路由监听到地址栏中url的变化

3.React 路由内部遍历所有Router组件,使用路由规则(path)与pathname进行匹配

4.当路由规则(path)能够匹配地址栏中的pathname时,就展示该Route组件的内容

编程式导航:

通过JS代码来实现页面跳转
history是React路由提供的,用于获取浏览器历史记录的相关信息
push(path):跳转到某个页面,参数path表示要跳转的地址
go(n):前进或后退到某个页面,参数n表示前进或后退页面数量

 1 class Login extends Component {
 2 handleLogin = () => {
 3 // 使用编程式导航实现页面之间的跳转
 4 this.props.history.push(‘/home‘)
 5 }
 6 render() {...省略其他代码} }
 7 在函数组件中使用
 8 props.history.push("/home")
 9 ---"/home"  表示将要跳转的页面路径

默认路由:表示进入页面就会匹配的路由

默认路由的path为:/

1 <Route path="/" component={Home} />
2 表示在页面一开始加载就跳转到Home组件,展示Home组件的内容

原文地址:https://www.cnblogs.com/qdjj/p/12359530.html

时间: 2024-10-03 14:39:23

简单的说一下react路由(逆战班)的相关文章

解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形如:localhost:3000/#/free-lesson的路由,另一种是browserHistory的形式,形如:localhost:3000/person-center的真实URL路由.在实际项目中常常用真实的URL的方式,但是该形式存在一个隐藏的问题,就是项目打包后,浏览器页面刷新会出现40

React 路由懒加载的几种实现方案

这篇文字简单的介绍了React在路由懒加载方面的几种实现方案. 传统的两种方式 import() 符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象.这意味着模块时异步加载的 webpack v2+ 使用 使用方式 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function component() {  return import( /* webpackChu

我的一个react路由之旅(步骤及详图)

今天开始react一个重要部分的xiao~习,路由~(过程截图,最后附代码) 以下代码只能骗糊涂蛋子,没错,就是我自己,不要打算让我敲出多高级的东西~ 理论性知识几乎没有,请不要打算让我给你说原理啥的,原理性的东西,网上很多,我现在搬砖学习很开心,勿忘初心~ (1)首先,你确定你安装了react环境,这第一步难度系数1,菜鸟级别的不演示了 (2)接下来,你要是用react路由,需要安装路由插件 1 npm install react-router-dom --save-dev //这里可以使用c

我的一个React路由嵌套(多级路由),路由传参之旅

在上一篇react路由之旅中,我们简单地配置了react,进行了react路由及相关知识的学习,引入以及实现一个局部跳转的功能,接下来就是深入学习路由的嵌套以及传参,这是工作中主要用要的. 我的react已经配置了redux(见我的redux之旅),所以这是在引入的插件里做的演示. 从App组件跳转到NewRoute组件(需要简单的路由跳转,点击自己预习) (1)新建一个demo: 这里使用了render方式在一个文件中模拟了多个组件的效果 代码只为讲解使用在真实开发中尽量不要这样写代码的. 这

react路由配置(未完)

React路由 React推了两个版本 一个是react-router 一个是react-router-dom 个人建议使用第二个 因为他多了一个Link组件 Npm install react-router-dom 1.引入 上边两种方法都行,需要注意的是第二种,下边的便签的写成<HashRouter></HashRouter> 2.如何使用 3.路由传参 原文地址:https://www.cnblogs.com/5b4cn/p/9393527.html

React 路由

React 路由 React 推出两个版本 一个是 react-router 一个是 react-router-dom 这里使用的是 react-router-dom  因为该方法多了一个  Link 组件 1. 在创建好 React 环境的基础上 下载 react-router-dom npm install react-router-dom 2. 引入  react-router-dom 注意 :  在引入时如果第一个参数只有 HashRouter 时  那么在模板中标签名为<HashRou

React 路由基本配置

app.js /* react路由的配置: 1.找到官方文档 https://reacttraining.com/react-router/web/example/basic 2.安装 cnpm install react-router-dom --save 3.找到项目的根组件引入react-router-dom import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 4.复制官网文档根组件里面

一个简单的react路由拦截

不同于vue,通过在路由里设置meta元字符实现路由拦截.react实现路由拦截的基本思路还是利用Route 的render函数.通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截. 接下来,我们实现一个简单的实例了解路由拦截的基本流程. 页面初次渲染的时候,需要我们进行登录.在这个首屏的页面里,我们放入一个链接.当点击链接,我们想进入我们的布局页面,(实际项目中是我们的后台).但是布局页面是不允许我们随意进入的.如果没有登录(真实项目中我们以sessioni

electron原来这么简单----打包你的react、VUE桌面应用程序

也许你不甘心只写网页,被人叫做"他会写网页",也许你有项目需求,必须写桌面应用,然而你只会前端,没关系.网上的教程很多,但是很少有能说的浅显易懂的,我尽力将electron打包应用说的清晰明了,希望能你在写自己的应用的时候,感到心中有数.话不多说,进入正题: 一.安装electron 为了方便你以后的使用,建议全局安装.以后在任何文件夹都能使用electron.怎么安装就不废话了,不会的去官网,安装好electron之后也安装一个专用的打包工具electron-packager,以方便