码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-25 00:07:23      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:root   路径   路由   使用   规则   相关   元素   一个   Route组件   

现代前端大多数都是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组件的内容

 

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

标签:root   路径   路由   使用   规则   相关   元素   一个   Route组件   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!