React路由的详解

Posted 2022-10-23 ZZZ --- jh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React路由的详解相关的知识，希望对你有一定的参考价值。

React路由

路由

当应用变得复杂时, 就需要分块进行处理和展示, 传统模式下, 我们是把整个应用分成了多个页面, 然后通过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的路由

网址: https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

React Router

网址: https://reacttraining.com/react-router/

React Router 提供了多种不同环境下的路由库

web
native

基于Web的React Router

基于 web 的 React Router 为：react-router-dom

安装

npm i -S react-router-dom

组件

url的hash

URL的hash就是锚点，本质上是改变window.location的href属性；
我们可以直接赋值location.hash来改变href，但是页面不发生刷新

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <a href="#view1">视图1</a>
  <a href="#view2">视图2</a>
  <a href="#view3">视图3</a>

  <div id="view"></div>

  <script>
    function getHash()
      console.log(window.location.hash);
      view.innerHTML = window.location.hash;
    
    getHash();
    window.addEventListener('hashchange',getHash)
  </script>
</body>
</html>

以上这个案例点哪个按钮页面就会显示出来对应的锚点,控制台也会输出对应的

路由的类型: BrowserRouter 组件和HashRouter 组件,他俩得包裹着所有的内容

BrowserRouter 组件

基于 HTML5 History API 的路由组件

引入: import BrowserRouter from "react-router-dom";

HashRouter 组件

基于 URL Hash 的路由组件

引入: import HashRouter from "react-router-dom";

Route组件

通过该组件来设置应用单个路由信息, Route组件所在的区域就是当URL与当前Route设置的path属性匹配的时候, 后面component将要显示的区域.

path属性

匹配url;( 匹配url的方式不是相等, 而是以给定的url开头)

component属性

当url和前面的path匹配上的时候,compinent里面写显示的内容

exact属性

exact属性表示路由使用精确匹配模式, 非exact模式下’/’ 匹配所有以’/’ 开头的路由.

<!-- src/view/index.js -->
import React from "react";

export default function IndexPage()
  return <h1>首页</h1>


<!-- src/view/about.js -->
import React from "react";

export default function AboutPage()
  return <h1>关于我们</h1>
 

<!-- src/view/aboutMore.js -->
import React from "react";

export default function AboutMorePage()
  return <h1>详情</h1>

<!-- src/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(
  <BrowserRouter >
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

<!-- src/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";

function App() 
  return (
    <div className="App">
      <Route path='/' exact component=IndexPage />
      <Route path='/about' exact component=AboutPage />
      <Route path='/about/more' exact component=AboutMorePage />
    </div>
  );


export default App;

Link组件

Link组件用来处理a链接类似的功能(它会在页面中生成一个a标签), 但设置这里需要注意的, react-router-dom拦截了实际a标签的默认动作, 然后根据所有使用的路由模式(Hash或者HTML5)来进行处理, 改变了URL, 但不会发生请求, 同时根据Route中的设置把对应的组件显示在指定的位置.

作用:

只改变url

to属性

to属性类似a标签中的href

<!-- src/component/nav.js -->
import React from 'react';
import  Link  from "react-router-dom";

export default function Nav()
  return(
    <nav>
      <Link to='/'>首页</Link>
      <span> |  </span>

      <Link to='/about'>关于我们</Link>
      <span> |  </span>

      <Link to='/about/more'>详情</Link>
      <span> |  </span>
    </nav>
  )

<!-- src/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";
import Nav from "./component/nav";

// path中: 匹配url的方式不是相等, 而是以给定的url开头


function App() 
  return (
    <div className="App">
      /* link组件 只改变url */
      <Nav />
      
      /* path属性: 匹配url */
      <Route path='/' exact component=IndexPage />
      <Route path='/about' exact component=AboutPage />
      <Route path='/about/more' exact component=AboutMorePage />
    </div>
  );


export default App;

传递props

如果 Route 使用的是 component 来指定组件，那么不能使用 props

render属性: 通过 render 属性来指定渲染函数，render 属性值是一个函数，当路由匹配的时候指定该函数进行渲染

import React, useState from 'react';

let [user,setUser] = useState('router');

<Route path='/' exact render=()=>
	return <IndexPage user=user setUser=setUser/>
 />

<!--src/view/index.js-->
import React from "react";

export default function IndexPage(props)
  console.log(props);
  let user,setUser = props;

  return <h1>
    <a onClick=()=>
      setUser('React可不')
    >啦啦</a>
    
    首页
  </h1>

动态路由

为了能给处理上面的动态路由地址的访问, 需要为Route组件配置特殊的path.

目的: 就是为了给不同的组件传递不同的参数

路由参数:

history: 历史记录以及路由给我们的一些操作

goBack 返回上一步

goForward 前进一步

push: 修改当前的url

replace: 修改当前的url

// history.push(’/about’); //这个的回退功能是可以用的. 会增加历史记录

// history.replace(’/about’); //这个没有回退一说. 不会增加历史记录
location: 获取当前url的一些信息
- pathname – 当前的URL
- search – 接口参数
- state – 跳转路由时传递的参数
match: 当前路由匹配的相关规则
- params – 动态路由传过来的参数

<!-- src/view/index.js -->
import React from "react";
import  NavLink, Link  from "react-router-dom";

export default function IndexPage()
  return (
    <div>
      <h1>留言列表</h1>

      <Link to='/list/1'>1</Link>
      <span> | </span>
      <Link to='/list/2'>2</Link>
      <span> | </span>
      <Link to='/list/3'>3</Link>
      <span> | </span>
      <Link to='/list/4'>4</Link>
      <span> | </span>
      <Link to='/list/5'>5</Link>
      <span> | </span>
      <Link to='/list/6'>6</Link>
    </div>
  )

<!-- app.js -->
import React from 'react';
import  Route,Switch  from "react-router-dom";
import IndexPage from "./view/index";
import Page404 from "./view/Page404";

function App() 
  return (
    <div className="App">
      <Switch>
        <Route path='/list/:page' exact render=(props)=>
          return <IndexPage ...props ></IndexPage>
        ></Route>

        <Page404 component=Page404></Page404>
      </Switch>
      
    </div>
  );

export default App;

以上的这个案例注意path路径写成动态的

NavLink组件

NavLink 与 Link类似, 但是它提供了两个特殊属性用来处理页面导航.

activeStyle

当当前URL 与 NavLink 中的to匹配时, 激活activeStyle中的样式

activeClassName

与 activeStyle 类似, 但是激活的是 className

<!-- src/component/nav.js -->
import React from 'react';
import  NavLink  from "react-router-dom";

export default function Nav()
  return(
    <nav>
      <NavLink 
        to='/'
        exact
        activeClassName='active'
        activeStyle=
          color:'red'
        
      >首页</NavLink>
      <span> |  </span>

      <NavLink 
        to='/about'
        exact
        activeClassName='active about'
        activeStyle=
          color:'red'
        
      >关于我们</NavLink>
      <span> |  </span>

      <NavLink 
        to='/about/more'
        exact
        activeClassName='active about more'
        activeStyle=
          color:'red'
        
      >详情</NavLink>
      <span> |  </span>
    </nav>
  )

isActive

默认情况下, 匹配的是URL 与 to的设置, 通过 isActive 可以自定义激活逻辑, isActive是一个函数, 返回布尔值

Switch组件

该组件只会渲染首个被匹配的组件

<!-- app.js -->
import React from 'react';
import  Route,Switch  from "react-router-dom";
import IndexPage from "./view/index";
import AboutPage from "./view/about";
import Page404 from "./view/Page404";

function App() 
  return (
    <div className="App">
      <Switch>
        <Route path='/' exact component=IndexPage></Route>
        <Route path='/about' exact component=AboutPage></Route>
        <Page404 component=Page404></Page404>
      </Switch>
    </div>
  );

export default App;

以上这个案例中要注意Page404写的顺序,如果写在Switch里面的最上面的话,不管加载哪个页面都只会出现页面飞走的内容,所以他要写在Switch里面的最下面.

Redirect组件

to属性: 设置跳转的URL

<!-- app.js -->
import React from 'react';
import  Route, Switch, Redirect  from "react-router-dom";
import IndexPage from "./view/index";
import Page404 from "./view/Page404";

function App() 
  return (
    <div className="App">
      <Switch>
        <Route path='/' exact render=()=>
          return <Redirect to='/list/1'></Redirect>
        ></Route>

        <Route path='/list/:page' exact render=(props)=>
          return <IndexPage ...props ></IndexPage>
        ></Route>

        <Page404 component=Page404></Page404>

      </Switch>
      
    </div>
  );

export default App;

以上这个案例目的就是让页面加载出来的时候就在page=1的页面中,并且让上面的地址栏里面显示的也是这个http://localhost:3000/list/1

withRouter组件(高阶组件, 高阶函数,高阶路由)

如果一个组件不是路由绑定组件，那么该组件的 props 中是没有路由相关对象的，虽然可以通过传参的方式传入，但是如果结构复杂，这样做会特别繁琐。所以就可以通过 withRouter 方法来注入路由对象

<!-- src/view/about.js -->
import React from "react";
import Inner from "./inner";

export default function AboutMorePage(props)
  let location,match = props;
  // console.log(match);

  return (
    <div>
      <h1>关于我们</h1>
      <Inner />
    </div>
  )

<!-- src/view/inner.js -->
import React from "react";
import  withRouter  from "react-router-dom";

function Inner(props)

  return (
    <div>
      <h1>Inner</h1>
      <button onClick=()=>
        console.log(props);
      >按钮</button>
    </div>
  )


export default withRouter(Inner);

hooks (Router5.0之后出现的)

不在类组件内使用
useHistory : 获取History对象
useLocation : 获取Location对象
useParams : 获取Params
useRouteMatch : 获取Match

总结:

路由有它的优点也有它的缺点
React Router 提供了web环境和native环境的路由库
路由的类型: BrowserRouter 组件和HashRouter 组件

以上是关于React路由的详解的主要内容，如果未能解决你的问题，请参考以下文章

React路由详解

十 React路由（react-router4.x）：动态路由get传值React中使用url模块

React路由的详解