React函数组件路由和组件

admin管理员组

文章数量:1633912

函数组件路由和组件

• 路由
• • 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