大家好，又见面了，我是你们的朋友全栈君。
文章目录
- React 路由
- 前端路由
- React Router
- 基于 Web 的 React Router
- react-router-dom 的核心组件
- Router组件
- Route 组件
- exact 属性
- component 属性
- Route:render 路由组件传参
- 动态路由
- Link 组件
- to 属性
- NavLink 组件
- activeStyle
- activeClassName
- isActive
- Switch 组件
- Redirect 组件
- withRouter 组件
React 路由
react-router路由路官网 安装:
npm install react-router-dom传统模式下 我们把整个应用分成了多个页面, 然后通过 URL 进行链接, 但是这种方式也会有问题, 每次切换页面都需要重新发送所有请求和渲染页面, 不止性能上会有影响, 同时也会导致整个
JavaScript重新执行, 丢失状态.SPA单页面应用: Single Page Application : 单页面应用，整个应用只加载一个页面（入口页面），后续在与用户的交互过程中，通过 DOM 操作在这个单页上动态生成结构和内容
- 优点:
- 有更好的用户体验（减少请求和渲染和页面跳转产生的等待与空白），页面切换快
- 重前端，数据和页面内容由异步请求（AJAX） DOM 操作来完成，前端处理更多的业务逻辑.
- 缺点:
- 首屏处理慢
- 不利于
SEO.
SPA 的页面切换机制: 虽然 SPA 的内容都是在一个页面通过 JavaScript 动态处理的，但是还是需要根据需求在不同的情况下分内容展示，如果仅仅只是依靠 JavaScript 内部机制去判断，逻辑会变得过于复杂，通过把 JavaScript 与 URL 进行结合的方式：JavaScript 根据 URL 的变化，来处理不同的逻辑，交互过程中只需要改变 URL 即可。这样把不同 URL 与 JavaScript 对应的逻辑进行关联的方式就是路由，其本质上与后端路由的思想是一样的。
前端路由
前端路由只是改变了 URL 或 URL 中的某一部分，但一定不会直接发送请求，可以认为仅仅只是改变了浏览器地址栏上的 URL 而已，JavaScript 通过各种手段处理这种 URL 的变化，然后通过 DOM 操作动态的改变当前页面的结构, 跟传统方式相比就不是再发送请求切换页面, 性能会高一些.
- URL 的变化不会直接发送 HTTP 请求
- 业务逻辑由前端 JavaScript 来完成
目前前端路由主要的模式：
- 基于 URL Hash 的路由
- 基于 HTML5 History API 的路由
React Router
React项目中使用的 React Router 库
React Router 提供了多种不同环境下的路由库
- Web
- native
基于 Web 的 React Router
基于 web 的 React Router 为：
react-router-dom
- 安装:
npm i -S react-router-dom
- react-router-dom 的核心组件如下
- Router 组件
- BrowserRouter 组件
- HashRouter 组件
- Route 组件
- Link 组件
- NavLink 组件
- Switch 组件
- Redirect 组件
react-router-dom 的核心组件
Router组件
如果我们希望页面中某个部分的内容需要根据 URL 来动态显示，需要用到 Router 组件 ，该组件是一个容器组件，只需要用它包裹 URL 对应的根组件即可 react-router-dom 为我们提供了几个基于不同模式的 router 子组件
- BrowserRouter 组件
- 基于 HTML5 History API 的路由组件
- HashRouter 组件
- 基于 URL Hash 的路由组件
Route 组件
通过该组件来设置应用中单个路由信息，Route 组件所在的区域就是当 URL 与当前 Route 设置的 path 属性匹配的时候，后面 component 将要显示的区域.
exact 属性
exact 属性表示路由使用 精确匹配模式，非 exact 模式下 ‘/’ 匹配所有以 ‘/’ 开头的路由
component 属性
component 属性传递props <Route exact path='/' component={ Home}
Route:render 路由组件传参
通过 render 属性来指定渲染函数，render 属性值是一个函数，当路由匹配的时候指定该函数进行渲染 <Route exact path='/' render={ () => <Home items={ this.state.items} />} />
Route 组件的 render属性: Route 组件的 render 属性接收一个函数, 该函数会有一个
props属性,props属性中, 会包含了一些路由相关的信息或者说路由的api, 我们可以借助这种方式传递给要渲染的路由组件. 代码演示案例如下: <Route path="/about" exact render={ (props)=>{ console.log('路由信息 -->',props); return <About { ...props} user={ user} /> }} /> // 如果不是通过 render 函数的形式写的路由组件, 那么 props 会直接注入到 路由组件的 props 属性中 # 比如 下面这种直接写路由组件的方式 <Route path="/" exact component={ About} /> // 这种方式会直接把路由相关的信息注入到 About 的props 属性中, 在About中可以直接用props接收
动态路由
为了能给处理上面的动态路由地址的访问，我们需要为 Route 组件配置特殊的 path <Route path="/about" component={ About} />
Link 组件
Link 组件用来处理 a 链接 类似的功能（它会在页面中生成一个 a 标签），但设置这里需要注意的，react-router-dom 拦截了实际 a 标签的默认动作，然后根据所有使用的路由模式（Hash 或者 HTML5）来进行处理，改变了 URL，但不会发生请求，同时根据 Route 中的设置把对应的组件显示在指定的位置
to 属性
to 属性类似 a 标签中的 href
NavLink 组件
NavLink 与 Link 类似，但是它提供了两个特殊属性用来处理页面导航。
activeStyle
当当前 URL 与 NavLink 中的 to 匹配的时候，激活 activeStyle 中的样式
activeClassName
与 activeStyle 类似，但是激活的是 className
isActive
默认情况下，匹配的是 URL 与 to 的设置，通过 isActive 可以自定义激活逻辑，isActive 是一个函数，返回布尔值
Switch 组件
该组件只会渲染首个被匹配的组件. 包在 Switch 组件中的 Route 会一项一项的匹配, 匹配成功一项之后,就不会再继续匹配其它内容了. <Switch> <Route path="/" exact component={ Index} /> <Route path="/about" exact component={ (props)=>{ console.log('路由信息 -->',props); return <About { ...props} user={ user} /> }} /> <Route path="/join" component={ Joinus} /> <Route path="/join/detail" component={ JoinDetail} /> <Route component={ View404} /> </Switch>
Redirect 组件
to
- 设置跳转的 URL.
withRouter 组件
如果一个组件不是路由绑定组件，那么该组件的 props 中是没有路由相关对象的，虽然我们可以通过传参的方式传入，但是如果结构复杂，这样做会特别的繁琐。幸好，我们可以通过 withRouter 方法来注入路由对象. let List2 = withRouter(List) // 对 List 组件进行包装, 注入路由信息到 props 中.
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/136454.html原文链接：https://javaforall.cn
