开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> React函数组件路由和组件 -> 正文阅读

[JavaScript知识库]React函数组件路由和组件

路由

当应用变得复杂的时候，就需要分块的进行处理和展示，传统模式下，我们是把整个应用分成了多个页面，然后通过 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.org/zh-CN/docs/Web/API/History_API

React Router

? https://reacttraining.com/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}/>
      <Route path='/about' exact  component={AboutPage}/>
      <Route path='/about/more' exact component={AboutMorePage}/>
    </div>
  );
}
 
export default App;

Link组件

他解析出来就是a标签,但是他自带的阻止a标签的默认行为,改变了url由路由处理

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

to属性

? 他是link标签的必须写的属性

? to 属性类似 a 标签中的 href

作用

修改url

使用:

创建一个nav组件

import React from 'react';
import {Link} from'react-router-dom';

export default function Nav(){
    return (
    	<nav>
        	<Link  to='/' exact>首页</Link>
        	 <span>|</span>
        	
        	<Link  to='/about' exact>关于</Link>
        	 <span>|</span>
        
        	<Link  to='/about/more' exact>详情</Link>
        	 <span>|</span>
        
        </nav>
    )
}

传递props

<Route exact path='/' component={Home}

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

用Route : render

<Route exact path='/' render={() => <Home items={this.state.items} />} />

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

App.js

import React,{useState} 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 './components/nav'

//path : 匹配url的方式不是相等,而是以指定的url开头
function App() {
  let [user,setUser]=useState("router111");
  return (
    <div className="App">
     
      <Nav />

      <Route path='/' exact render={()=>{
        return <IndexPage user={user} setUser={setUser}/>
      }}/>
      <Route path='/about' exact  component={AboutPage}/>
      <Route path='/about/more' exact component={AboutMorePage}/>
    </div>
  );
}
 
export default App;

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>
}

使用props传递

先引入setState:

import React,{useState} from ‘react’;

接着定义:

let [user,setUser]=useState(“router111”);

在标签传参:

<Route path=’/’ exact render={()=>{
return
}}/>

在子组件接收:

export default function IndexPage(props){

console.log(props);

let {user,setUser}=props;

return

<a onClick={()=>{

? setUser(‘React’);

}}>关于我们

}

NavLink组件

NavLink与Link类似,都是转换成a标签,但是他提供了两个特殊的属性来处理页面导航;

activeStyle

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

activeClassName

他与activeStyle类似,但他激活的四clssName;

nav.js

import React from 'react';
import {NavLink} from'react-router-dom';

export default function Nav(){
    return (
        <nav>
            <NavLink to='/'
            activeClassName='active'
            exact
            activeStyle={{
                color:"cyan"
            }}
            >
                关于我们
            </NavLink>
            <span>|</span>
            <NavLink to='/about'
            activeClassName='active-about'
            exact
            >
                关于我们11
            </NavLink>
            <span>|</span>
            <NavLink to='/about/more'
            activeClassName='active-more'
            exact
            >
                详情
            </NavLink>
            <span>|</span>
           
        </nav>
    )
}

注意:他和link有类似的问题,需要用exact精准查找activeStyle,如果不加exact点完之后样式一直存在,加了点完就恢复原来样式

isActive

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

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

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

简单来说:就是把一个不是路由组件加上withRouter(方法名),就会变成路由组件,并且会把参数也带过来

about.js

import React from 'react';
import Inner from'./inner';
export default function AboutPage(props){
    let {location,match}=props;
    // console.log(location);
    // console.log(match);
    return (
        <div>
            <h1>关于</h1>
            <Inner use={'哈哈哈'}/>
        </div>
    )

}

inner.js

import React from 'react';
import {withRouter} from 'react-router-dom';
 function Inner(props){
   
    console.log(props);
    return (
        <div>
            <h1>Inner   </h1>
        </div>
    )

}
export default withRouter(Inner);

Switch 组件

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

page404.js

import React from 'react';

export default function page404(){
   
    return (
        <div>
            <h1>页面飞走了</h1>
            
        </div>
    )

}

App.js

import React from 'react';
import IndexPage from './view/index';
import AboutPage from './view/about';
import {Route,Switch} from 'react-router-dom';
import Page404 from "./view/page404"
//path : 匹配url的方式不是相等,而是以指定的url开头
function App() {
  return (
    <div className='App'>
      <Switch>
      //<Page404 component={Page404}/> 
      <Route path='/'  exact component={IndexPage}/>
      <Route path='/about' exact  component={AboutPage}/>
      <Page404 component={Page404}/> 
      </Switch>
    </div>
  )
}
 
export default App;

注意:顺序问题,放在最前面输出那个路径都是渲染第一个组件

Redirect 组件

to属性:设置跳转url

? 相当于重定向

App.js

import React from 'react';
import IndexPage from './view/index';

import { Route, Switch ,Redirect} from 'react-router-dom';
import Page404 from "./view/page404"



//path : 匹配url的方式不是相等,而是以指定的url开头
function App() {
  return (
    <div className='App'>
      <Switch>


        <Route path='/list/:hanbb' exact render={(props) => {
          return <Redirect to='/list/1'></Redirect>
        }} />
        <Page404 component={Page404} />
      </Switch>
    </div>
  )
}

export default App;

hooks (Router5.0之后出现的)

? useHistory—获取history对象;

? useLocation : 获取Location对象

? useParams : 获取Params

useRouteMatch : 获取Match

import React from 'react';
import {withRouter,useHistory,useLocation,useParams} from 'react-router-dom';
 function Inner(props){
   
    console.log(props);
    console.log(useHistory());  
    console.log(useLocation());
    console.log(useParams());   //存储动态路由参数的地方
    let {goBack}=useHistory();

    return (
        <div>
            <h1>Inner   </h1>
            <button onClick={()=>{
                goBack();
            }}>按钮</button>
        </div>
    )

}
export default Inner;

路由参数

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

? history.go(-1) :后退一步

? goBack() //返回上一步

? goForward() //前进一步

? push:修改当前的url,会把历史记录存起来,可以回退回去

? replace: 修改当前的url,不会存历史记录,不能返回上一步

index.js

import React from 'react';
export default function IndexPage(props){
    console.log(props)
    let {history}=props;
    console.log(history.length)
    return (
        <div>
            <h1>首页</h1>
            <button onClick={()=>{
                // history.go(-1)
                // goBack() //返回上一步
                // goForward() //前进一步

                //history.push("url")
                // push:修改当前的url,会把历史记录存起来,可以回退回去
                // replace: 修改当前的url,不会存历史记录,不能返回上一步
                history.push('/about','哈哈')
                // history.replace('/about')

            }}>按钮</button>
        </div>
    )

}

location: 获取当前url的一些信息

? pathname:当前的url

? search:参数

? state:跳转路由时传递的参数

import React from 'react';
export default function AboutPage(props){
    let {location}=props;
     console.log(location);
   
    return (
        <div>
            <h1>关于</h1>
        </div>
    )

}

match:当前路由的匹配原则

? params:动态路由传过来的参数

import React from 'react';
export default function AboutPage(props){
    let {location,match}=props;
    console.log(match);
    return (
        <div>
            <h1>关于</h1>
        </div>
    )

}