路由，动画

React路由配置：

1, 下载react的路由模块(默认最新6.3, 如需使用5.x, 在模块名后加@5)
npm install react-router-dom --save     // 6.0
或
npm install react-router-dom@5 --save   // 5.0

2, 在入口文件 src/index.js中,从路由模块导入工具组件Router ,并包裹根组件 
(注: 哈希模式用HashRouter 历史模式用BrowserRouter)
import { HashRouter } from 'react-router-dom'
ReactDOM.render(
  
    
    
);
3, 创建路由文件src/router/index.js,  并从路由模块中导入工具组件Route
(router5.0使用Switch  router6.0使用Routes)
import { Switch, Route } from "react-router-dom";    // 5.0
或  
import { Routes, Route } from "react-router-dom";    // 6.0
4, 创建路由组件,配置路由, 并导出
(router6.0 去除了exact, 并把component引入组件构造器改成了element引入组件实例)
export default function MyRouter(){     // 5.0
     return(
        
            
        
     )
}
或
export default function MyRouter(){     // 6.0
     return(
        
             } />
        
     )
}
5, 在app.js中导入路由组件
import RouterView from './router/index';
6, 在根组件app模板中添加路由组件,即路由出口

7, 在需要跳转的页面, 从路由模块导入工具组件 Link
import {Link} from 'react-router-dom'
8, 使用Link组件执行路由跳转
首页/Link>

注意: 使用router6.0实现的路由跳转, 不会向组件中传入路由信息

路由跳转和传值：

路由控制跳转的组件中(一般是views目录下的页面组件),props会自动添加以下三个字段, (根组件和components中的组件没有路由信息)
history : 主要用于路由跳转和路由监听
location: 主要显示路由信息, 可用于路由传值
match: 主要用于路由传值, 也可展示路由信息

react路由跳转方式1: 路由标签Link跳转
    跳转个人中心  

react路由跳转方式2: 编程式导航跳转
    {
        props.history.push('/user')
    }}>跳转个人中心


react路由传值方式1: url路径拼接传值
    动态路由(友好url)传值
    接收  {this.props.match.params.name}
    
react路由传值方式3: 自定义对象传值
    {
        pathname: "/user",
        data: { name }
    }}>自定义对象传值
    接收 {this.props.location.data && this.props.location.data.name}
 

路由监听

(一): 局部路由监听: 
1, 在路由跳转的组件中使用props.history.listen() 监听路由, 得到返回值cancle
this.cancle = props.history.listen((route, type)=>{})

2, 在组件的componentWillUnmount中取消路由监听, 调用 cancle函数, 以防止重复监听,浪费性能
this.cancle()

注: 局部监听只能监听此组件离开时的路由, 类似于vue中beforeRouteLeave() 路由守卫


(二): 全局路由监听: 
1, 在app.js中从路由模块导入withRouter 
import { withRouter } from 'react-router-dom'

2, 导出App时,用withRouter 函数处理后导出, 把路由数据添加到props中
export default withRouter(App);

3, 在app根组件的componentDidMount函数中添加全局路由监听
 componentDidMount() {
    console.log(this.props)
    this.props.history.listen(path=>{
      console.log("全局路由监听" + path.pathname)
    })
  }

注: 全局路由监听,根组件App中没有路由信息, 需要使用高阶组件withRouter添加路由信息,然后监听

React过渡效果：

1, 在react工程中下载安装过渡动画模块
npm install react-transition-group --save
2, 在需要执行过渡的组件中导入动画模块
import { CSSTransition } from "react-transition-group"
3, 在需要过渡的标签外层添加CSSTranstion组件

        
    
4, 在组建的css中通过class设置入场和出场动画
.myfade-enter   .myfade-enter-active    .myfade-enter-done
.myfade-exit      .myfade-exit-active    .myfade-exit-done

注意: 1, 入场和出场的class样式要按顺序写,动画开始和结束顺序不能颠倒
      2, 需要在index.js中关闭严格模式, 删除   
      3, enter-active和exit-active中要写过渡结束状态才有效

React路由切换动画：

1, 在react工程中下载安装过渡动画模块
npm install react-transition-group --save

2, 在路由配置文件/src/router/index.js中导入动画组件
    import { TransitionGroup, CSSTransition } from "react-transition-group"

3, 在路由组件模板中,用动画组件包裹路由组件
    
        
            
                
            
        
    
    注意: CSSTransition组件的key属性要保证唯一性,所以用location.pathname 
          Switch 组件要设置location属性为路由信息的props.location, 保证路由跳转组件的key和CSSTransition的key一致

4, 路由组件中没有路由信息location.pathname, 需要使用withRouter导入
    import { withRouter } from "react-router-dom"
    export default withRouter(MyRouter)

5, 在组件的css文件中写路由切换动画过程
/* 入场动画过程 */
.binge1-enter{
  transform: translateX(200px)
}
.binge1-enter-active{
  transition: 2s;
  transform: translateX(0px)
}
.binge1-enter-done{
  transform: translateX(0px)
}
/* 出场动画过程 */
.binge1-exit{
  transform: translateX(0px)
}
.binge1-exit-active{
  transition: 2s;
  transform: translateX(200px)
}
.binge1-exit-done{
  transform: translateX(200px)
}

.home, .user, .login, .animate{
  position: absolute;
  left: calc(50% - 200px)
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！