07-06-React-Router的单页应用

2021-12-26 本文已影响0人 magic_pill

课程目标

理解前端路由的作用；
掌握 React-Router 各 API 使用细节；
可根据项目需求，在 React 项目中，组织合理的路由方案。

课程内容

路由

路由：根据不同的 url 规则，给用户展示不同的视图（页面）；
当应用变得复杂的时候，就需要分块的进行处理和展示，传统模式下，我们是把整个应用分成了多个页面，然后通过 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 Router 库；
React Router 提供了多种不同环境下的路由库：web、native；
官网：https://reactrouter.com/。

基于 Web 的 React Router

基于 web 的 React Router 为：react-router-dom；
安装：npm i -S react-router-dom。

路由模式

BrowserRouter 组件 -- history

基于 HTML5 History API 的路由组件。

HashRouter 组件 -- hash

基于 URL Hash 的路由组件。

功能组件

Route 组件：

匹配规则（v6 之前）：
- 默认模糊匹配，当前 URL 以该 path 为开始时，则匹配成功；
- exact：精确匹配，URL===path || URL===path/；
- strict：严格匹配，URL===path，要注意 strict 必须与精确匹配一起使用才生效；
- 多路径匹配：通过数组实现；
- 动态路由，见最下面。
渲染视图：
- component；
- render。

import { Route } from 'react-router-dom';
import About from './views/About';
import Hire from './views/Hire';
import Home from './views/Home';
/**
 * 匹配规则：
 * 1、默认情况-——模糊匹配，当前 URL 以该 path 为开始时，就能匹配：/index、/index/、/index/xxx；
 * 2、exact——精确匹配，URL===path || URL===path/；
 * 3、strict——严格匹配，URL===path，但是需要与 exact 一起使用才生效；
 * 4、多路径匹配——通过数组匹配。
 */

function App() {
  // 当有值需要传递给对应路由组件时，可以通过 render 属性实现。
  const user = {
    name: 'yjw',
    age: 18
  }
  return (  
    <>
      <div>React Router Page</div>
      <Route exact path={['/', '/home', '/index']} component={Home} /> 
      <Route exact strict path='/about' component={About} />
      <Route 
        path='/hire' 
        render={() => {
          return <Hire user={user} />
        }} 
      />
    </>
  );
}

export default App;

// react-router 6 之后的使用方式
import { Routes, Route } from 'react-router-dom';
import About from './views/About';
import Hire from './views/Hire';
import Home from './views/Home';

function App() {
  return (  
    <>
      <Routes>
        {/* 默认 精确匹配，严格匹配 */}
        <Route path='home' element={<Home />} /> 
        <Route path='/about' element={<About />} />
        <Route path='/hire' element={<Hire />} />
      </Routes>
    </>
  );
}

export default App;

链接组件：

Link；
NavLink：
- activeClassName；
- activeStyle；
- isActive: function。

// 可以使用 a 标签实现，但是页面每次都会刷新
export default () => {
  return <>
    <a href='/home' >首页</a>
    <span> | </span>
    <a href='/about' >关于</a>
    <span> | </span>
    <a href='/hire' >加入</a>
  </>
}

import { Link, NavLink } from "react-router-dom"
/**
 * 应用内链接：Link 或者 NavLink
 * 应用外链接：a 标签
 */
/**
 * NavLink 用于导航的链接制作
 * - 当当前的 url 和 NavLink 的 to 属性匹配后，则会给当前的标签加一个选中状态，注：NavLink 默认情况下也是模糊匹配；
 * - activeClassName：当前项被选中后的 className，默认为 active；
 * - activeStyle：当前项被选中后的 style；
 * - isActive：function，返回一个 Boolean 值，表示该标签的 class、style 始终是 active 状态或者 非active 状态。
 */
export default () => {
  return <div>
    <NavLink to='/' activeClassName='homeActive'>首页</NavLink>
    <span> | </span>
    <NavLink to='/about' activeStyle={{color: 'red'}}>关于</NavLink>
    <span> | </span>
    <NavLink to='/hire' isActive={()=>{return true}} activeStyle={{color: 'yellow'}}>加入</NavLink>
    <span> | </span>
    <a href='https://www.baidu.com' >百度</a>
  </div>
}

Switch 组件：只匹配一个路径；

Redirect 组件：当输入的 url 不合法时，可以重定向到 404：

form 属性；
to 属性。

import { Route, Switch, Redirect } from 'react-router-dom';
import Nav from './Nav';
import About from './views/About';
import Hire from './views/Hire';
import Home from './views/Home';
import View404 from './views/404.js';

function App() {
  // 当有值需要传递给对应路由组件时，可以通过 render 属性实现。
  const user = {
    name: 'yjw',
    age: 18
  }
  return (  
    <>
      <div>React Router Page</div>
      <Nav />
      <Switch>
        <Route exact path={['/', '/home', '/index']} component={Home} /> 
        <Route exact path='/about' component={About} />
        <Route 
          path='/about/join' 
          render={() => {
            return <Hire user={user} />
          }} 
        />
        <Route path='/404' component={View404} />
        {/* 当路径找不到时，显示404页面，并且将 url 显示为404 */}
        <Redirect to='/404' />
      </Switch>
    </>
  );
}

export default App;

路由参数

通过 props，可以获取 history、location、match 和 staticContext。

history

action：“PUSH” || “POP” || “REPLACE”；
- “PUSH”：应用内通过连接跳转到当前视图的，或者通过 push 方法跳转到当前视图；
- “POP”：直接输入地址跳转到当前应用，或者从外部链接跳转进来的；
- “REPLACE”：通过重定向跳转或者通过 replace 方法跳转；
go：function，go(n)——跳转历史记录n步；
goBack：function，goBack()——返回历史记录上一步；
goForward：function，goForward()——前进历史记录下一步；
length：当前源在历史记录中记录的条目数；
push：function，push(path[,state])——跳转视图，向历史记录中，添加新的一条记录，从而影响视图；state 的值其实就是修改 location 下面的 state 的值，同 replace 方法中的 state；
replace：function，replace(path[,state])——跳转视图，替换掉历史记录中当前这条；
block：当离开当前组件时，会弹窗提示；全局函数，如果只需要在当前组件进行弹窗提示，在当前组件即将卸载时，调用该方法的返回值进行移除；
createHref：function，createHref(location)，当 url 比较复杂时，比如含有参数和hash，这时可以使用该方法，返回一个 url 地址，但是需要再调用 push、replace 来进行跳转；
listen：监听 url 跳转，如果跳转了会打印 location和action，同样是全局函数。

location：

hash：hash 值，url 中 # 后面的内容；
pathname：当前的 url，不包含参数和hash；
search：当前的 search 值，? 后面的内容；
state：undefined、push 或 replace 传递的信息。

match：匹配信息

isExact：boolean，和 Route 中配置没有关系，取决于当前 path 和 url 是否能精确匹配；
params：{} 动态路由的参数；
path：和 pathname 不是一个概念，这里的 path 是当前 route 的 path 值；
url：当前 url 中，被当前 path 匹配成功的部分。

路由信息获取

高阶路由 - withRouter

非路由组件获取路由信息

import { NavLink, withRouter } from "react-router-dom";

function SubNav(props) {
  console.log('SubNav: ', props);
  return (  
    <div className='sub-nav'>
      <NavLink 
        isActive={(...args) => {
          console.log('arg: ', args)
          return true;
        }}
        to='/list/all'
      >全部</NavLink>
      <NavLink to='/list/good'>精华</NavLink>
      <NavLink to='/list/share'>分享</NavLink>
      <NavLink to='/list/ask'>问答</NavLink>
    </div>
  );
}

const Nav = withRouter(SubNav);
export default Nav;

路由 Hooks，v5 版本之后引入了 Hooks。

useLocation()；
useHistory()；
useRouteMatch()；
useParams()：获取动态路由的参数信息。

以下为完整练习代码：

// App.js
import { Route, Switch, Redirect } from 'react-router-dom';
import Nav from './Nav';
import About from './views/About';
import Hire from './views/Hire';
import Home from './views/Home';
import View404 from './views/404.js';
import List from './views/list/List';
import './index.css';

const types = ['good', 'good', 'share', 'ask'];

function App() {
  // 当有值需要传递给对应路由组件时，可以通过 render 属性实现。
  const user = {
    name: 'yjw',
    age: 18
  }
  return (  
    <div className="wrap">
      <div>React Router Page</div>
      <Nav />
      <Switch>
        <Route path={['/home', '/index']} component={Home} /> 
        <Route path='/about' component={About} />
        <Route 
          path='/join' 
          render={() => {
            return <Hire user={user} />
          }} 
        />
        {/* 
          component 自带路由参数，通过 render 传递路由参数时需要手动将参数传递过去 
          - 动态路由： :代表动态路由，: 后面代表的是名字
        */}
        {/* <Route 
          // path={['/list', '/list/:type', '/list/:type/:page']}
          path='/list/:type?/:page?'
          render={ (props) => {
            return <List {...props}/>
          }}
          exact
        /> */}
        <Route 
          path='/list/:type?/:page?'
          exact
          render={({match}) => {
            console.log('route-> ', match)
            const {type='good', page='1'} = match.params;
            if(types.includes(type) && String(parseInt(page))===page && parseInt(page)>0) {
              return <List />
            } else {
              return <Redirect to="/404" />
            }
          }}
        />
        <Route path='/404' component={View404} />
        <Redirect to='/404' />
      </Switch>
    </div>
  );
}
/**
 * list 的路径问题：
 * - /list
 * - /list/分类
 * - list/分类/页码
 */

export default App;

// Nav.js
import { Link, NavLink } from "react-router-dom"
/**
 * 应用内链接：Link 或者 NavLink
 * 应用外链接：a 标签
 */
/**
 * NavLink 用于导航的链接制作
 * - 当当前的 url 和 NavLink 的 to 属性匹配后，则会给当前的标签加一个选中状态，注：NavLink 默认情况下也是模糊匹配；
 * - activeClassName：当前项被选中后的 className，默认为 active；
 * - activeStyle：当前项被选中后的 style；
 * - isActive：function，返回一个 Boolean 值，表示该标签的 class、style 始终是 active 状态或者 非active 状态。
 */
export default () => {
  return <div className='nav'>
    <NavLink to='/home' >首页</NavLink>
    <span> | </span>
    <NavLink to='/about' >关于</NavLink>
    <span> | </span>
    <NavLink to='/join' >加入</NavLink>
    <span> | </span>
    <NavLink to='/list' >产品列表</NavLink>
  </div>
}

// List.js
import ListList from "./ListList";
import Pagination from "./Pagination";
import SubNav from "./SubNav";

function List(props) {
  return (  
    <>
      <h3>List</h3>
      <SubNav />
      <ListList />
      <Pagination />
    </>
  );
}

export default List;

// SubNav.js
import { NavLink, useParams } from "react-router-dom";

function SubNav(props) {
  const { type='good' } = useParams();
  return (  
    <div className='sub-nav'>
      <NavLink to='/list/good'>精华</NavLink>
      <NavLink to='/list/share'>分享</NavLink>
      <NavLink to='/list/ask'>问答</NavLink>
    </div>
  );
}

export default SubNav;

// Pagination.js
import { useParams } from "react-router";
import { Link } from "react-router-dom";
import data from './data';
const limit = 6;

function Pagination() {
  const { type='good', page='1' } = useParams();
  const nowData = data[type];
  const pageLen = Math.ceil(nowData.length/limit);

  const renderPage = () => {
    const inner = []
    for (let i = 1; i <= pageLen; i++) {
      if(pageLen === Number(page)) {
        inner.push(<span key={i}>{i}</span>)
      } else {
        inner.push(<Link to={`/list/${type}/${i}`} key={i}>{i}</Link>)
      }
    }
    return inner;
  }
  return (  
    <div>
      {renderPage()}
    </div>
  );
}

export default Pagination;

// ListList.js
import { useParams } from "react-router";
import data from './data';
const limit = 6;

/**
 * 求页数
 * 每页的第一条：(page-1) * 6
 */
function ListList() {
  const { type='good', page='1' } = useParams();
  const nowPage = Number(page);
  const start = (nowPage - 1) * limit;
  const end = nowPage * limit;
  const nowData = data[type]?.filter((item, index)=>(index>=start && index<=end));
  
  return ( 
    <div>
      <ul>
        {nowData?.map(d => {
          return <li key={d.id}>{d.title}</li>
        })}
      </ul>
    </div>
  );
}

export default ListList;

07-06-React-Router的单页应用

课程目标

课程内容

路由

SPA

优点

缺点

SPA 的页面切换机制

前端路由

目前前端路由的主要模式

React Router

基于 Web 的 React Router

路由模式

BrowserRouter 组件 -- history

HashRouter 组件 -- hash

功能组件

路由参数

history

location：

match：匹配信息

路由信息获取

高阶路由 - withRouter

路由 Hooks，v5 版本之后引入了 Hooks。

猜你喜欢

热点阅读