react声明式导航和编程式导航

react中的两种路由导航方法【声明式导航、编程式导航】

主要使用的方法 【Link, NavLink, useHistory() ,Route】
前言： 在react中的导航方式自己主要以声明式导航为主，无他，因为简单。但是在使用UI框架后，很多地方是需要点击按钮进行跳转，只能用编程式导航了，百度了很多，找了个最简单的，在这里做好笔记的同时也希望可以帮到正在学习react的伙伴。首先是简单的声明式导航，而后说一下编程式导航。稍显罗里吧嗦?

1、声明式导航 【Link,NavLink】

声明式导航自己主要用到的是react中的两个路由组件【Link、NavLink】。其中Link组件的导航方式和HMTL中的a标签类似，在react将虚拟DOM渲染成真实DOM后，Link组件也被渲染成了a标签。下面看一下例子顺便在代码中附上react中的路由懒加载方式：
Link 方式

import React, { Component,lazy,Suspense } from 'react'//导入了路由懒加载模块
import { Route,Redirect,Link} from 'react-router-dom'
import Login from '../Login/index'
const lazyCompOnent= lazy(() => import('../lazyComponent')); //使用路由懒加载的方式加载组件
export default class World extends Component {
render() {
return (


NavLink 方式
NavLink方式相当于Link的加强版，主要的属性有

activeClassName(string)：设置选中样式，默认值为active
activeStyle(object)：当元素被选中时，为此元素添加样式
exact(bool)：为true时，只有当导致和完全匹配class和style才会应用
strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线
isActive(func)判断链接是否激活的额外逻辑的功能

需要查看两者的主要区别在这里附上 CSDN 博文一篇 https://blog.csdn.net/lhjuejiang/article/details/80366839
如下代码，在被点击时可以显示路径对应的背景色，路径相同时则显示相同的背景色

import { NavLink} from 'react-router-dom'
import React from 'react'
import './index.scss'
export default function Aside(){
return(



• 
  二级菜单
  


• 
  二级菜单
  


• 
  二级菜单
  


• 
  二级菜单
  

scss中的代码：

2、编程式导航 【useHistory(),Route】

个人比较喜欢偷懒的方式，用了类似vue3中useRouter( )的导航方式，使用了react中的新增的
useHistory（） 钩子（hook）来做函数式组件的编程式导航，请看示例代码：
注意： 该钩子函数只能用于函数组件

import { useHistory } from 'react-router';//导入useHistory钩子
import { Button } from 'antd';
export default function Header(){
let history = useHistory() //将useHistory()钩子赋值给history方便使用
let programmingLink = function(){
history.push('/home')//点击按钮后使用push方法跳转到对应的路由位置
}
return(


在类式组件中进行编程式跳转【Route】

import { Component } from 'react'
import { Route } from 'react-router'
export default class Footer extends Component {
render () {
return (
<>
( { history.push('/changLink') }}>点击更换路由)} />

)
}
}

需要更详细的类式组件编程式跳转，可以看下博客园的这篇博客
https://www.cnblogs.com/panrui1994/p/11865650.html

使用编程式跳转的方法不只是使用useHistory()钩子和react-router中的Route，也可以使用其他的方式进行跳转，这里自己只是选择了自己认为比较简单的方法。希望能帮到您，同时非常希望能有巨佬能批评指正加以补充?