react路由

react 路由

当应用变得复杂的时候,就需要分块的进行处理和展示,传统模式下,我们是把整个应用分成了多个页面,然后通过 URL 进行连接。但是这种方式也有一些问题,每次切换页面都需要重新发送所有请求和渲染整个页面,不止性能上会有影响,同时也会导致整个 JavaScript 重新执行,丢失状态。

SPA

单页面应用,整个应用只加载一个页面(入口页面),后续在与用户的交互过程中,通过 DOM 操作在这个单页上动态生成结构和内容.由于避免了页面的重新加载,SPA 可以提供较为流畅的用户体验。

优点:

​ 1.有更好的用户体验

​ 2.重前端,数据和页面内容由异步请求(ajax+dom)操作来完成,前端处理更多的业务逻辑

3.减轻服务器压力

缺点:

​ 1.首次进入处理慢

​ 2.不利于SEO

3.前进、后退管理

路由分类

1.前端路由

前端路由只是改变了 URL 或 URL 中的某一部分,但一定不会直接发送请求,可以认为仅仅只是改变了浏览器地址栏上的 URL 而已,JavaScript 通过各种手段处理这种 URL 的变化,然后通过 DOM 操作动态的改变当前页面的结构

  • URL 的变化不会直接发送 HTTP 请求业务;
  • 逻辑由前端 JavaScript 来完成

目前前端路由主要的模式:

  • 基于 URL Hash 的路由
  • 基于 HTML5 History API 的路由

2.后端路由

理解: value是function, 用来处理客户端提交的请求。

注册路由: router.get(path, function(req, res))

工作过程:当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据

React Router

安装

npm i -S react-router-dom

组件

BrowserRouter 组件

  • ​ 基于 HTML5 History API 的路由组件

  • ​ BrowserRouter:地址栏没有

HashRouter 组件

  • 基于 URL Hash 的路由组件

  • ​ HashRouter:地址栏有#

Route 组件

Route 组件所在的区域就是就是当 URL 与当前 Route 设置的 path 属性匹配的时候,后面 component 将要显示的区域

path是路径 component:写组件名

path : 匹配url的方式不是相等,而是以指定的url开头只要符合的都会输出出来;
index.js

基本使用
import React from 'react';
export default function IndexPage(){
    return <h1>index</h1>
}

about.js

import React from 'react';
export default function AboutPage(){
    return <h1>about</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;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import {HashRouter} from 'react-router-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App';
ReactDOM.render(
  <BrowserRouter>
  <App />
</BrowserRouter>,
  document.getElementById('root')
);

注意:在入口文件引入HashRouter或者BrowserRouter,并包裹

exact

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

在Route标签里加上exact他会精确查找

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组件

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

Link 组件用来处理 a 链接 类似的功能

to属性
类似 a 标签中的 href
​ 他是link标签的必须写的属性

作用:修改url

案例:

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='/' render={() => <Home items={this.state.items} />} />
NavLink组件

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

activeStyle

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

activeClassName

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

案例:

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

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;
    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 组件

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

page.js

import React from 'react';
export default function page404(){
   
    return (
        <div>
            <h1>111111</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 Page from "./view/page"
function App() {
  return (
    <div className='App'>
      <Switch>
      <Route path='/'  exact component={IndexPage}/>
      <Route path='/about' exact  component={AboutPage}/>
      <Page404 component={Page}/> 
      </Switch>
    </div>
  )
}
export default App;
Redirect 组件

重定向,一般写在所有路由注册的最下方,当所有路由都无法匹配时,跳转到Redirect指定的路由

to属性:设置跳转url

案例:

App.js

import React from 'react';
import IndexPage from './view/index';
import { Route, Switch ,Redirect} from 'react-router-dom';
import Page from "./view/page"
function App() {
  return (
    <div className='App'>
      <Switch>
        <Route path='/list/:hanbb' exact render={(props) => {
          return <Redirect to='/list/1'></Redirect>
        }} />
        <Page404 component={Page} />
      </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,不会存历史记录,不能返回上一步

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

  • ​pathname:当前的url

  • search:参数

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

  • match:当前路由的匹配原则 ​ params:动态路由传过来的参数
  • ​ params:动态路由传过来的参数
编程式路由导航

借助this.prosp.history对象上的API对操作路由跳转、前进、后退

  • this.prosp.history.push() 跳转到指定路径的页面

  • this.props.history.replace() 替代栈位置,即不会产生历史记录

  • this.props.history.goBack() 回退一格

  • this.props.history.goForward() 前进一格

  • this.props.history.go() 前进或者后退n格(根据传入的数字正负数)

总结:

本文介绍了react的路由,大家要注意一些知识点的注意事项

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值