React动画和路由

最新推荐文章于 2024-04-03 09:45:00 发布
最新推荐文章于 2024-04-03 09:45:00 发布
阅读量623 收藏
点赞数
分类专栏： React 文章标签： react.js 动画 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44978043/article/details/121919219
版权

1.过渡动画

React并没有提供过渡动画操作，组件的过渡动画需要依赖第三方模块：transition
安装

yarn add react-transition-group

单元素过渡动画

import {CSSTransition} from 'react-transition-group'
...
<CSSTransition in={布尔值，控制单元素显示/隐藏} timeout={动画持续事件，单位毫秒} unmountOneExit={布尔值，元素隐藏后卸载，必选} className="字符串，动画样式名称前缀">
<单元素标签></单元素标签>
</CSSTransition>
...

.前缀-enter{} /*进入前*/
.后缀-enter-active{} /*进入中*/
.前缀-enter-done{} /*进入后，不常用*/
.前缀-exit{} /*离开前*/
.前缀-exit-active{} /*离开中*/
.前缀-exit-done{} /*离开后样式：不常用*/

多元素过渡动画：列表动画

import {TransitionGroup,CSSTranition} from "react-transition-group"
...
<TransitionGroup>
...多个元素
<CSSTransition ...><单元素标签></单元素标签></CSSTransition>
<CSSTransition ...><单元素标签></单元素标签></CSSTransition>
<CSSTransition ...><单元素标签></单元素标签></CSSTransition>
</TransitionGroup>
...

2.界面组件库：Ant Design

安装

yarn add antd

引入
安装完成后，引入样式文件 src/index.css

@import '~antd/dist/antd.css'

按需/全局引入antd组件库

import {Button} from 'antd'
...
<Button type="primary">点击</Button>
...

3.路由

1.概述

路由，描述了根据用户请求跳转到不同视图页面的一种操作规则
React中的路由，涉及到核心API

HashRouter：路由容器，主要用于包含路由匹配规则和路由组件，路径匹配方式包含#
BrowserRouter:路由容器，路径匹配方式和HashRouter不同，常规匹配方式
Switch：路由匹配对象，一般包裹在Router的外层，用户唯一匹配单个路由规则对象
Route：路由规则对象，包含类路径匹配、对应的渲染组件
NavLink：路由导航链接，一般用于导航作用
Redirect：路由重定向，可以将用户的访问路径，重定向到其他路径

2.新版本（6.x）路由操作

安装路由模块

yarn add react-router-dom

开发布局组件:src/Layout.jsx,完成组件和路由的跳转

import React,{Componet} from 'react'
import {BrowserRouter as Router,Routes,Route,NavLink} from 'react-router-dom'
import Home from './Home'
import About from './About'
export default class Layout extends Component {
	render() {
		return (
			<div>
				{/* 路由容器，将所有匹配规则包含起来*/}
				<Router> 
				{/* 规则集合（新版），将所有规则包含起来 */}
					<Routes>
						{/*定义路由规则*/}
						<Route path="/home" element={<Home />}></Route>
						<Route path="/about" element={<About />}></Route>
					</Routes>
				
				<nav>
				<ul>
					<li><NavLink to="/home">首页</NavLink></li>
					<li><NavLink to="/about">相关</NavLink></li>
					</ul>
				</nav>
				<Router>
			</div>
		)
	}
}

3.老版本路由操作（常用）

yarn add react-router-dom@5.3.X

开发布局组件:src/Layout.jsx,完成组件和路由的跳转

<div>
	<Router>
		<Route path="/home" component={Home} />
		<Route path="/about" component={About} />
		<NavLink to="/home">首页</NavLink>
		<NavLink to="/about">相关</NavLink>
	</Router>
</div>

4.路由重定向

<Route path="/">
	<Redirect to="/home">
</Route>

5.路由导航高亮

react-router-dom提供的NavLink组件包含了默认导航高亮提示，主要通过导航链接的class="active"的样式处理来实现导航高亮的操作
注意：NavLink组件编译后的结果算是超链接标签

a.active {
	color:red
}

6.路由严格匹配

导航链接中如果出现了同时多个路由规则匹配用户请求的情况，就会导致多个导航同时高亮的情况，需要通过路由模块提供的严格匹配方式排除导航多高亮的问题
需要在导航连接上，添加exact关键词
需要在路由组件上，添加exact关键词

<div>
	<Router>
	<Route path="/" exact>
	<Redirect to="/home">
</Route>
		<Route path="/home" component={Home} />
		<Route path="/about" component={About} />
		<NavLink to="/" exact>去首页</NavLink>
		<NavLink to="/home">首页</NavLink>
		<NavLink to="/about">相关</NavLink>
	</Router>
</div>

7.404路由

针对用户访问的路由规则以外的路径，需要友好的提示404信息
创建404组件：NotFont.jsx

import React, { Component } from 'react'

export default class NotFound extends Component {
    render() {
        return (
            <div>
                404NotFond
            </div>
        )
    }
}

编辑Layout.jsx
所有路由规则后面

  <Route path="*" component={NotFound}></Route>

关于404路由和路由穿透

用户访问规则路径以外的路径，会得到404页面
用户访问路由规划页面，除了访问到页面组件，同时也访问到了404页面，这样的问题就是路由穿透问题
react-router-dom中提供的Switch组件，结局多个路由同时匹配的问题

<Switch>
路由规则
</Switch>

8.动态路由

多个路由规则匹配同一个路由组件，让路由组件达到复用的目的；该路由规则中包含固定的访问路径和访问数据部分，就是常规的RESTful路径风格
创建 Goods.jsx

...
<div>商品详情组件</div>
...

编辑Layout.jsx，添加Goods.jsx组件路由规则

 <Route path="/goods/:id" component={Goods}></Route>

编辑About.jsx

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export default class About extends Component {
    state= {
        goods:[{id:1,name:'苹果'},{id:2,name:"橘子"}]
    }
    render() {
        return (
            <div>
               {this.state.goods.map(item=>(
                  <Link to={`/good/${item.id}`}  key={item.id}>{item.name}查看详情</Link>
               ))}
            </div>
        )
    }
}

9.路由传参

路由规则，可以让路由在多个组件之间进行切换的同时传递数据，传递数据的方式有两种

RESTful参数
查询字符串参数

1.RESTful动态路由参数

路由规则Layout.jsx

 <Route path="/goods/:id" component={Goods}></Route>

路由链接About.jsx

{this.state.goods.map(item=>(
                  <Link to={`/good/${item.id}`}  key={item.id}>{item.name}查看详情</Link>

接收数据Goods.jsx

render() {
	let {params} = this.props.match
	return <div> 商品详情组件{params.id}</div>
}
2.查询字符串

创建组件 Order.jsx


export default class Order extends Component {
    render() {
        return (
            <div>
                订单页面
            </div>
        )
    }
}

定义路由匹配规则

<Route path="/order" component={Order}>

创建访问链接 Cart.jsx

import React, { Component } from 'react'
import { Link } from 'react-router-dom'

export default class Cart extends Component {
    state = {
        cartList: [
            {id:1,name: '苹果'},
            {id:2,name:'橘子'}
        ]

    }
    render() {
        return (
            <div>
                {this.state.cartList.map(item=>(
                    <Link to={`/order?id=${item.id}`}>下单{item.name}</Link>
                ))}
            </div>
        )
    }
}

接收数据 Order.jsx
需要安装第三方模块qs

import qs from 'qs'
...
render() {
	let {search} = this.props.location 
	let query = qs.parse(search.substring(1))
	retrun (
		<div>
                订单页面{query.id}
         </div>
	)
}
...

10.嵌套路由

React中的嵌套路由，直接在目标页面组件中定义即可
创建组件-登录 Login.jsx
创建组件-注册 Register.jsx
Home.jsx页面添加二级路由

export default class Home extends Component {
    render() {
        return (
            <div>
               <Link to="/home/login">登录</Link>
               <Link to="/home/register">注册</Link>
             <div>
                <Route path="/home/login" component={Login}></Route>
                <Route path="/home/register" component={Register}></Route>
             </div>
            </div>
        )
    }
}

11.高阶路由

为了让路由组件的子组件接收到路由信息
react-router-dom提供了一个高阶组件：withRouter可以让子组件包含/接收到路由数据
编辑：Header.jsx

import { withRouter } from 'react-router-dom'
 class Header extends Component {
    render() {
        return (
            <div>
                <h2>公共页头{this.props.location.pathname}</h2>
            </div>
        )
    }
}
export default withRouter(Header)

12.路由懒加载

路由懒加载，相当于按需导入以及路由切换过程中的加载操作

import {lazy} from 'react'
const Home = lazy(()=>import('./Home'))

路由切换，需要添加一个过渡组件，将路由组件宝航在<React.Suspence>组件内部

<Suspence fallback={<h1>加载中</h1>}>
路由规则
</Suspense>

4.路由封装

1.现有路由的问题

当前项目中，根据React语法习惯，将路由在使用的地方进行声明。如Layout.jsx中配置了一级路由

路由匹配规则代码，和页面视图代码混合到一起，后期不方便维护
路由匹配路径和路由组件，和普通页面组件混合在一起，不利于功能的扩展和项目维护
多级路由的配置，会让路由规则出现在大量不同的页面组件中，不方便后期路由的设置维护

2.路由初步封装

创建router/RouterView.jsx路由组件，封装一级路由

import {lazy} from 'react'
const  About =lazy(()=>import('./componets/About'))
const  Home =lazy(()=>import('./componets/Home'))
const  NotFound =lazy(()=>import('./componets/NotFound'))
const  Goods =lazy(()=>import('./componets/Goods'))
const  Order =lazy(()=>import('./componets/Order'))
const  Cart =lazy(()=>import('./componets/Cart'))

//配置路由规则
const routes = [
	{path:"/",redirect:"/home",exact:true},
	{path:"/home",component:Home,exact:false},{path:"/about",component:About,exact:false},{path:"/goods",component:Goods,exact:false},{path:"/order",component:Order,exact:false},{path:"/cart",component:Cart,exact:false},{path:"*",component:NotFound,exact:false},
]

// 封装路由组件
function RouterView() {
	return <Switch>
		{routes.map((item,index)=>{
		if(item.component) {
			return <Route key={index} exact={item.exact} path={item.path} component={item.component}/>
		}else {
			return <Route key={index} exact={item.exact} path={item.path}><Redirect to={item.redirect}></Redirect></Route>
}
})}
	</Switch>
}
export default RouterView

在Layout.jsx中引入使用

import RouterView from '../router/RouterView'
...
render() {
	<React.Suspence fallback={<h1>加载中</h1>}>
		<RouteView />
	</React.Suspence>
}
...

3.封装升级：组件和配置分离

创建组件RouterView.jsx主要用于生成路由组件，不做具体路由规则配置

function RouterView(props) {
	let {routes} = porps
	return <Switch>
		{routes.map((item,index)=>{
		if(item.component) {
			return <Route key={index} exact={item.exact} path={item.path} component={item.component}/>
		}else {
			return <Route key={index} exact={item.exact} path={item.path}><Redirect to={item.redirect}></Redirect></Route>
}
})}
	</Switch>
}
}
export default RouterView

创建配置文件：indexRouter.js用于一级路由规则配置

import {lazy} from 'react'
const  About =lazy(()=>import('./componets/About'))
const  Home =lazy(()=>import('./componets/Home'))
const  NotFound =lazy(()=>import('./componets/NotFound'))
const  Goods =lazy(()=>import('./componets/Goods'))
const  Order =lazy(()=>import('./componets/Order'))
const  Cart =lazy(()=>import('./componets/Cart'))

//配置路由规则
const routes = [
	{path:"/",redirect:"/home",exact:true},
	{path:"/home",component:Home,exact:false},{path:"/about",component:About,exact:false},{path:"/goods",component:Goods,exact:false},{path:"/order",component:Order,exact:false},{path:"/cart",component:Cart,exact:false},{path:"*",component:NotFound,exact:false},
]
export default routes

一级路由，在Layout中使用

import routes from './indexRouter'
import RouterView from './RouterView'
...
render() {
	...
	<RouterView routes={routes} />
	...
}
...

创建类似文件：users.js,主要用于用户中心二级路由配置

import {lazy} from 'react'
const Login = lazy(()=>import('./pages/Login'))
const Register = lazy(()=>import('./pages/Register'))
const routes = [
{path:"/home/login",component:Login},
{path:"/home/Register",component:Register}
]
export default routes

二级路由在Home.jsx中的应用

import routes from './users'
import RouterView from './RouterView'
...
render() {
	...
	<RouterView routes={routes} />
	...
}
...

4.导航守卫

React中没有导航守卫，通过组件中的配置选项，完成导航守卫的功能

组件需要通过路由规则进行匹配渲染，可以在路由规则中添加渲染组件的条件，起到了导航守卫的功能

function RouterView(props) {
	let {routes} = props
	return <Switch>
		{
			routes.map((item,index)=>{
				if(item.component){
					return <Route key={index} exact={item.exact} path={item.path} render={()=>{
	let token = localStorage.getItem("token")
	if(!token&&item.path==='/about'){
		return <Redirect to="/login" />
	}
	let Component = withRouter(item.component)
	return <Component />
}}>
				}
			})
		}
	</Switch>
}

5.编程式导航

路由组件中，this.props中包含了三大模块
match:用于RESTful参数数据传递处理
location：用于查询字符串参数传递处理
history：可以用于编程式导航

编程式导航：借助于this.props.history
go(num)
goBack()
goForward()
push(path):跳转到指定路径，并暴力流跳转历史记录
replace(path):跳转到指定路径，不报保留跳转历史记录


关注
专栏目录
react路由动画切换
wlt_5079的博客
06-21 2562
1.react过渡效果 2.react动画切换
为react-router实现无副作用的路由动画
lxj的博客
08-16 224
为react-router实现无副作用的路由动画 下面是比较常见的一种react-router动画实现方式: <TransitionGroup> <CSSTransition key={location.key} classNames="fade" timeout={300} > &lt...
react-router 路由切换动画的实现示例
12-10
路由切换动画 因为项目的需求，需要在路由切换的时候，加入一些比较 zb 的视觉效果，所以研究了一下。把这些学习的过程记录下来，以便以后回顾。同时也希望这些内容能够帮助一些跟我一样的菜鸟，让他们少走些坑。可能我对代码的表述不是很到位，希望大家不要介意。机智的你们一定可以看明白。 参考内容： react 路由动画 react-router Switch 组件 react 动画插件 1.插件依赖 使用的插件是react-transition-group。先简单介绍一下动画插件的使用方式。 CSSTransition这个组件有两个比较主要的属性：key和in。 in:Boolean
react配置路由动画
weixin_72127453的博客
02-21 324
react配置路由动画
react实现路由动画
m0_75192581的博客
08-06 178
【代码】react实现路由动画。
react路由动画切换（react 路由动画）
m0_65545080的博客
02-16 685
react
一个利用WebAnimationsAPI和CSS动画的自定义React路由器
08-07
一个利用Web Animations API和CSS动画的自定义React路由器
详解如何给React-Router添加路由页面切换时的过渡动画
12-03
在React开发中，React-Router是用于管理应用路由的重要库，而给路由页面添加过渡动画则可以提升用户体验。本文将详细介绍如何在React-Router v5（兼容v4）中使用react-transition-group库来实现页面切换时的过渡效果...
React路由动画
zc_123_的博客
03-21 149
React路由动画多种展示效果~~~~
react 路由动画的学习 --笔记记录
扶梡的博客
11-30 834
路由切换动画 路由切换过程中为了增强切换效果，需要为对应的路由页面添加对应的过渡效果，此时需要使用路由动画。react中路由动画的实现需要借助于react匹配的插件react-transition-group。 react-transition-group 基本知识： 在 react 项目中可使用官网提供的动画过渡库 react-transition-group 来实现切换页面（路由切 换）时的过渡效果。 路由切换动画 npm i react-transition-group react-
react路由动画跳转，猛练自然强
Lkkkk666的博客
07-13 232
那个组件想要实现跳转动画功能，就在那个组件的根节点绑定classname属性即可。4.因为react只有一个根节点，在最外层的盒子给一个classname名称。1.先在react项目中下载一个css第三方库。用npm或者yarn。2.在react组件中引用这个css库。5.创建一个css文件，引用到组件。创建 css文件，引用。下载 第三方库 引用。在跳转的时候即可实现。
react-transition-group 实现路由切换过渡动画
最新发布
日暮斜阳
04-03 1064
是一个 React 组件，通常在路由配置中使用，用于指定当前路由的子组件应该被渲染到哪个位置。它是一个受控组件，也就是说，它的值（即要渲染的组件）是由父组件（通常是路由组件）控制的。当父组件的状态发生改变时，更适合在 React Router 的路由配置中使用，用于在应用程序的当前路由中渲染嵌套的 Route 组件。，你可以在组件中获取到当前路由的子路由组件，并将其渲染到指定的位置。则更适合在函数组件内部使用，用于在组件中获取当前嵌套路由的信息。是一个非受控组件，它的值是由调用 Hook 的代码控制的。
React快速入门（三）动画、状态与路由
会思想的苇草i的博客
03-08 850
React是由Facebook开发的一款JavaScript库，用于构建用户界面。它采用组件化的方式进行开发，支持虚拟DOM技术，能够有效提高页面渲染性能。React具有易于学习、灵活、高效等特点，被广泛应用于Web应用和移动应用的开发中。本文对React的动画、状态与路由进行了简要概括。
React18使用react-transition-group实现路由切换过渡动画
qq_36383583的博客
04-07 1298
react18路由切换过渡动画的实现
react路由传值、react路由监听、react过渡动画、react虚拟DOM树、react路由切换动画
weixin_72099243的博客
03-14 287
2.4.2 在组件的componentWillUnmount中取消路由监听, 调用 cancle函数, 以防止重复监听,浪费性能。2.4.1在路由跳转的组件中使用props.history.listen() 监听路由, 得到返回值cancle。: 全局路由监听,根组件App中没有路由信息, 需要使用高阶组件withRouter添加路由信息,然后监听。1，在页面卸载时，取消监听 2，在全局根组件app中监听路由。4.3在路由组件模板中,用动画组件包裹路由组件。2.3 在根组件app中监听路由。
React 路由切换动画
宏斌的博客
02-02 1672
yarn add “react-transition-group”: “^4.4.1”, https://reactcommunity.org/react-transition-group/with-react-router 效果 app.tsx import React, { useCallback } from "react"; import { Redirect, Route } from "react-router-dom"; import Login from "./components/L.
react的动画过渡效果以及路由切换过渡动画
qweqwer12421的博客
06-29 471
1, 在react工程中下载安装过渡动画模块2, 在需要执行过渡的组件中导入动画模块3, 在需要过渡的标签外层添加CSSTranstion组件4, 在组建的css中通过class设置入场和出场动画注意: 1, 入场和出场的class样式要按顺序写,动画开始和结束顺序不能颠倒2, 需要在index.js中关闭严格模式, 删除 3, enter-active和exit-active中要写过渡结束状态才有效。
路由动画详解(附加代码效果)
jyl919221lc的博客
02-07 478
react路由动画详解(附加代码效果)
react-router-dom 学习总结
gaoshanyangzhi_1999的博客
05-19 690
说在最前 使用React构建的单页面应用，要想实现页面间的跳转。就需要使用到路由，在React中，常用的有两个包可以实现这个需求，即react-router和react-router-dom。那么这两个包有什么区别呢？不同之处就是后者比前者多出了<Link> <BrowserRouter>这样的 DOM 类组件。 因此我们只需引用 react-router-dom 这个包就...
React与Vue路由鉴权实现策略详解
"React路由鉴权的实现方法" 在React应用中，路由鉴权是一个重要的安全措施，确保只有经过授权的用户才能访问特定的页面或功能。本文将深入探讨React路由鉴权的实现方法，结合实际示例代码，提供一个清晰的理解。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值