admin管理员组文章数量:1633930
函数组件路由和组件
- 路由
-
- SPA
- SPA的切换机制
- 前端路由
- React Router
-
- 安装
- 组件
-
- BrowserRouter 组件
- HashRouter 组件
- Route 组件
- exact
- Link组件
-
- to属性
- 作用
- 使用:
- 传递props
- NavLink组件
-
- activeStyle
- activeClassName
- isActive
- withRouter 组件(高阶组件,高阶函数,高阶路由)
- Switch 组件
- Redirect 组件
- hooks (*Router5.0之后出现的*)
- 路由参数
-
- history :历史记录以及路由给我们提供的一些操作
- location: 获取当前url的一些信息
- match:当前路由的匹配原则
路由
当应用变得复杂的时候,就需要分块的进行处理和展示,传统模式下,我们是把整个应用分成了多个页面,然后通过 URL 进行连接。但是这种方式也有一些问题,每次切换页面都需要重新发送所有请求和渲染整个页面,不止性能上会有影响,同时也会导致整个 JavaScript 重新执行,丢失状态。
SPA
Single Page Application : 单页面应用,整个应用只加载一个页面(入口页面),后续在与用户的交互过程中,通过 DOM 操作在这个单页上动态生成结构和内容
优点:
1.有更好的用户体验(减少请求和渲染和页面跳转产生的等待和空白),页面切换快;
2.重前端,数据和页面内容由异步请求(ajax+dom)操作来完成,前端处理更多的业务逻辑
缺点:
1.首次进入处理慢;(可以通过按需加载解决这个问题)
2.不利于SEO(SEO是搜索引擎(百度,谷歌)优化)
SPA的切换机制
虽然 SPA 的内容都是在一个页面通过 JavaScript 动态处理的,但是还是需要根据需求在不同的情况下分内容展示,如果仅仅只是依靠 JavaScript 内部机制去判断,逻辑会变得过于复杂,通过把 JavaScript 与 URL 进行结合的方式:JavaScript 根据 URL 的变化,来处理不同的逻辑,交互过程中只需要改变 URL 即可。这样把不同 URL 与 JavaScript 对应的逻辑进行关联的方式就是路由,其本质上与后端路由的思想是一样的。
简单来说,就是操作url,通过改变url,依次来改变,我们写好逻辑,监控url的改变就可以,这样把url和javascript逻辑产生关联就是路由,本质思想和后端一样;
前端路由
前端路由只是改变了 URL 或 URL 中的某一部分,但一定不会直接发送请求,可以认为仅仅只是改变了浏览器地址栏上的 URL 而已,JavaScript 通过各种手段处理这种 URL 的变化,然后通过 DOM 操作动态的改变当前页面的结构
- URL 的变化不会直接发送 HTTP 请求业务;
- 逻辑由前端 JavaScript 来完成
目前前端路由主要的模式:
- 基于 URL Hash 的路由
- 基于 HTML5 History API 的路由
https://developer.mozilla/zh-CN/docs/Web/API/History_API
React Router
https://reacttraining/react-router/
React Router 提供了多种不同环境下的路由库
- web
- native
安装
npm i -S react-router-dom
组件
BrowserRouter 组件
基于 HTML5 History API 的路由组件
BrowserRouter:地址栏没有
HashRouter 组件
基于 URL Hash 的路由组件
HashRouter:地址栏有#
Route 组件
通过该组件来设置应用单个路由信息,Route 组件所在的区域就是就是当 URL 与当前 Route 设置的 path 属性匹配的时候,后面 component 将要显示的区域
创建两个组件
view/index.js
import React from 'react';
export default function IndexPage(){
return <h1>关于我们</h1>
}
view/about.js
import React from 'react';
export default function AboutPage(){
return <h1>关于我们111</h1>
}
App.js
import React from 'react';
import {
Route} from 'react-router-dom';
import IndexPage from './view/index';
import AboutPage from './view/about';
function App() {
return (
<div className="App">
<Route path='/' component={
IndexPage}/>
<Route path='/about' component={
AboutPage}/>
</div>
);
}
export default App;
注意:path是路径 component:写组件名
主入口文件index.js
index.js
import React from 'react';
import ReactDOM from 'react-dom';
// import {HashRouter} from 'react-router-dom'
import {
BrowserRouter} from 'react-router-dom'
import './index.css';
import App from './App';
ReactDOM.render(
// <HashRouter>
// <App />
// </HashRouter>,
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
重点注意:必须在主入口文件引入HashRouter或者BrowserRouter
这样引入多个组件会出现问题
因为:path : 匹配url的方式不是相等,而是以指定的url开头只要符合的都会输出出来;
exact
exact 属性表示路由使用 精确匹配模式,非 exact 模式下 ‘/’ 匹配所有以 ‘/’ 开头的路由
在Route标签里加上exact他会精确查找
App.js
import React from 'react';
import {
Route} from 'react-router-dom';
import IndexPage from './view/index';
import AboutPage from './view/about';
import AboutMorePage from './view/aboutMore';
//path : 匹配url的方式不是相等,而是以指定的url开头
function App() {
return (
<div className="App">
<Route path='/' exact component={
IndexPage}/
版权声明:本文标题:React函数组件路由和组件 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729176312a1188761.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论