React路由组件的使用以及常用的Hook（6版本）

一,React路由组件的使用以及常用的Hook（6版本）

npm i react-router-dom （这个命令下载都是最新版本）

其中BrowserRouter和HashRouter和5版本一样，这里就不再多说了

由于新版本推荐使用函数式组件,所以要用到hooks函数

1.首先先简单说一下hooks的简单使用

常用的三个Hook

(1).State Hook :React.useState()

(2).Effect Hook:React.useEffect()

(3).Ref Hook:React.useRef()

 State Hook

(1).State Hook让函数式组件也可以有state状态,并进行状态数据的读写操作

(2).语法: const [xxx,setXxx]  = React.useState(initValue)

(3).useState() 说明:

        参数:第一次初始化指定的值在内部做缓存

        返回值:包含2个元素的数组,第一个为内部当前状态值,第2个位更新状态值的函数

(4).setXxx()2种写法

        setXxx(newValue):参数为非函数值,直接指定新的状态值,内部覆盖原来的状态值

        setXxx(value => newValue):参数为函数,接收原本的状态值,返回新的状态值:

 Effect Hook

语法:useEffect(()=>{

        //在此可以执行任何带副作用的操作

        return()=>{

        //在这里做一些收尾工作 相当于componentWillUnmount()

        }

},[stateValue])//如果是[]则是componentDidMount() ,否则就是componentDidUpdate()

 Ref Hook

useRef 和 类组件中 React.createRef()作用相同

 2.react-router-dom中的路由变化

 新增Routes,Navigate ,删除了SwitchRedict,,其中Route中的写法改变了,Navigate相当于重定向