React 过渡动画路由 ui

最新推荐文章于 2026-05-16 15:27:45 发布

原创最新推荐文章于 2026-05-16 15:27:45 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

React

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

过渡动画

下载react-transition-group

cnpm i react-transition-group --save

CSSTransition实现单元素过渡动画 (1) unmountOnExit:退出时实现卸载该组件，该属性必须添加 (2) in:控制元素显示状态的 state 状态数据 (3) timeout:过渡动画效果持续时间，单位为毫秒 (4) classNames:指定过渡动画类名前缀(需要自定义两组四个过渡动画需要的 css 类选择器) (5) onEnter:元素进入前的回调函数，按需添加 (6) onEntering:元素进入中的回调函数，按需添加 (7) onEntered:元素进入后的回调函数，按需添加 (8) onExit:元素离开前的回调函数，按需添加 (9) onExiting:元素离开中的回调函数，按需添加 (10) onExited:元素离开后的回调函数，按需添加

import React, { Component } from 'react'
import './box.css'
// 1.导出CSSTransition组件
import {CSSTransition} from 'react-transition-group'
export default class Box1 extends Component {
    constructor(){
        super()
        this.state = {
            isShow:true,//控制元素的显示和隐藏
            btnName:'隐藏'
        }
    }
    render() {
        return (
            <div>
                <CSSTransition
                    unmountOnExit
                    in={this.state.isShow}
                    timeout="500"
                    classNames="fade"
                    onEntered={()=>this.setState({btnName:'隐藏'})}
                    onExited={()=>this.setState({btnName:'显示'})}
                >
                    <h1>单元素动画效果</h1>
                </CSSTransition>
 
 
                <button onClick={()=>this.setState({isShow:!this.state.isShow})}>{this.state.btnName}</button>
            </div>
        )
    }
}

TransitionGroup实现列表元素动画效果

import React, { Component } from 'react'
import './box.css'
import {CSSTransition,TransitionGroup} from 'react-transition-group'
export default class Box2 extends Component {
    constructor(){
        super()
        this.state = {
            list:[
                {id:1,name:'vue'},
                {id:2,name:'react'},
                {id:3,name:'angular'},
            ],
            isShow:true,
 
        }
    }
    render() {
        const {list} = this.state
        return (
            <div>
                {/* 
                TransitionGroup:需要将遍历的列表进行包裹
                CSSTransition:需要将遍历的每一项进行包裹
                 */}
                 <TransitionGroup>
                     {list.map(item=>(
                         <CSSTransition
                            key={item.id}
                            unmountOnExit
                            in={this.state.isShow}
                            timeout={500}
                            classNames="fade"
                         >
                            <div style={{display:'flex',justifyContent:'space-between',borderBottom:'1px solid #999'}}>
                                <h3>{item.name}</h3>
                                <button onClick={()=>this.del(item.id)}>移除</button>
                            </div>
                         </CSSTransition>
                     ))}
                 </TransitionGroup>
            </div>
        )
    }
 
    del(id){
       let list =  this.state.list.filter(item=>item.id!==id)
       this.setState({list})
    }
}

SwitchTransition实现切换效果

如果要实现让一个元素以过渡动画方式离开之后，再让另外一个元素以过渡动画方式进入;或者新元素以过渡动画方式进入之后，再以过渡动画方式移除旧元素的切换动画效果，就可以使用 SwitchTransition 组件来实现。

import React, { Component } from 'react'
import './box.css'
import {SwitchTransition,CSSTransition} from 'react-transition-group'
export default class Box3 extends Component {
    constructor(){
        super()
        this.state = {
            status:true,//状态
        }
    }
    render() {
        return (
            <div>
                <SwitchTransition>
                <CSSTransition
                    key={this.state.status ? "Goodbye, world!" : "Hello, world!"}
                    addEndListener={(node, done) => node.addEventListener("transitionend", done, false)}
                    classNames='slide'>
                        <button onClick={()=>this.setState({status:!this.state.status})}>{this.state.status ? "Goodbye, world!" : "Hello, world!"}</button>
                </CSSTransition>
                </SwitchTransition>
            </div>
        )
    }
}

react-router-dom路由模块

react-router-dom 是 react 官方提供的一个基于 react 的路由模块，但是 react-router-dom 是一个独立的模块，需要单独下载安装才能够使用。

下载

cnpm i react-router-dom --save

路由实现流程

Switch

  {/* 路由出口 */}
  <Switch>

  </Switch>

HashRouter：带有#
BrowserRouter ：常用的方式，不带#

路由规则

Route

path:浏览器中访问的地址 component:访问的组件 exact:精准匹配，不能用在父路由上 strict:严格模式需要结合exact属性一起使用才能有效。检查地址最后有没有斜线

404路由

当用户访问一个不存在的路由时,就会显示一个默认的页面,404页面.

{/* 404页面 */}
<Route path="/notfound" component={NotFound}></Route>
{/* 404页面的处理，当用户输入了错误地址时，前面的路由都没有匹配成功，就会重定向到一个固定的页面 */}
<Redirect to="/notfound"></Redirect>

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

路由导航

Link

{/* 导航链接 */}
<Link to="/">首页</Link> |
<Link to="/about">关于我们</Link>

NavLink

 <NavLink exact to="/" activeClassName="select">首页</NavLink> |
 <NavLink exact to="/about" activeClassName="select">关于我们</NavLink>

NavLink
- activeClassName:选中的样式
- activeStyle:选中的样式
- exact:精准匹配
- to: 必填项 to:要跳转的路由
路由组件和非路由组件包裹在Route组件里的是路由组件，可以使用路由相关的熟悉和方法。没有包裹在Route组件里的是非路由组件，比如App这个组件。需要通过withRouter这个高阶组件，转换为路由组件使用。

编程式导航

  // this.props.history.push(url); // push是在历史记录新增一条记录
  // this.props.history.replace(url); // replace是用新的记录替换老的记录
  // this.props.history.go(1); // go里面的参数是非零的整数，大于零表示前进，小于零表示后退
  // this.props.history.goBack(); // 后退一页
  // this.props.history.goForward(); //  前进一页

search传参

URLSearchParams

// URLSearchParams传参，不用安装其他内容
let search = new URLSearchParams(this.props.location.search)
console.log(search.get('id'));
console.log(search.get('title'));

querystringify.parse

 // 方式二,需要安装querystringify
 let params = querystringify.parse(this.props.location.search)

动态路由

修改路由规则
 <Route exact strict path="/goodsDetail/:id" component={NewsDetail}></Route>
  
 获取参数
 console.log(this.props.match.params);

路由懒加载

步骤:

React.lazy()

// 懒加载模式
const Home = React.lazy(()=>import('./pages/Route/Home'))

React.Supense(fallback)

index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
ReactDOM.render(
  <React.Suspense fallback={<h1>loading...</h1>}>
    <App />
  </React.Suspense>
    
,
  document.getElementById('root')
);

路由嵌套

render() {
  return (
    <div>
      <p>我是一个大的页面，包含了一些会切换的子页面</p>
      <NavLink to="/layout/small1">small1</NavLink>
      <NavLink to="/layout/small2">small2</NavLink>
      <NavLink to="/layout/small3">small3</NavLink>
      <br />
      <Button type="primary">Primary Button</Button>
      <Button>Default Button</Button>
      <Switch>
        {/* 路由组件中要写完整的路径，不能只写子路由 */}
        {/* 不要在父路由中写exact，要放在子路由中 */}
        <Route exact path="/layout/small1" component={Small1}></Route>
        <Route exact path="/layout/small2" component={Small2}></Route>
        <Route exact path="/layout/small3" component={Small3}></Route>
      </Switch>
    </div>
  )

antd

下载

cnpm i antd --save

使用

入口文件index.css
import 'antd/dist/antd.css';

import React, { Component } from 'react'
import { Button } from 'antd';
export default class Index extends Component {
render() {
return (
<div>
<Button type="primary">Primary</Button>
<Button>Default</Button>
</div>
)
}
}