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相当于重定向 

import React from 'react'
import { Link, Route, Routes, Navigate } from 'react-router-dom'

import Home from './pages/Home'
import About from './pages/About'


export default function App() {
    return (
        <div>
            <h3>React路由新</h3>
            <div className=''>
                <Link to="/home">Home</Link>&nbsp;
                <Link to="/about">About</Link>
            </div>
            <Routes>
                <Route path='/home' element={<Home />}></Route>
                <Route path='/about' element={<About />}></Route>
                <Route path='/' element={<Navigate to='/about' />}></Route>
            </Routes>

        </div >
    )
}

 NavLink中实现选中高亮

  <NavLink className={({isActive})=>isActive ? 'list-item active' : 'list-item '} to="/home">Home</NavLink>
  

除了这样常规的写路由,新增了路由表Hook ：useRoutes

import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'

// import routes from './routes'


export default function App() {
    // 根据路由表生成对应的路由
    const element = useRoutes([
        {
            path: '/about',
            element: <About />
        },
        {
            path: '/home',
            element: <Home />
        },
        {
            path: '/',
            element: <Navigate to='/about' />
        }
    ])

    return (
        <div>
            <h3>React路由新</h3>
            <div className=''>
                <NavLink to="/home">Home</NavLink>&nbsp;
                <NavLink to="/about">About</NavLink>
            </div>
            {/* 用这个代替Routes中的内容,方便管理 */}
            {element}

        </div >
    )
}

 也可以讲routes抽离出来，便于管理

import Home from "../pages/Home"
import About from "../pages/About"
import {Navigate} from 'react-router-dom'

export default [
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/home',
        element: <Home />
    },
    {
        path: '/',
        element: <Navigate to='/about' />
    }
]

多级路由可以使用Outlet来管理（相当于vue中router-view）

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom'

export default function Home() {
    // const element = useRoutes(routes)
    return (
        <div>
            <h3>我是Home组件</h3>
            <NavLink to="news" > 新闻</NavLink>&nbsp;
            <NavLink to="message" > 消息</NavLink>
            <Outlet />
        </div>
    )
}

三种传参方式：

        params： useParams

  <Link to={`context/${item.id}/${item.title}/${item.context}`}>{item.title}</Link>

---------------------------------------------------------------------------------------

import React from 'react'
import { useParams } from 'react-router-dom'

export default function Context() {
    const { id, title, context } = useParams()
    return (
        <div>
            <ul>
                <li>{id}</li>
                <li>{title}</li>
                <li>{context}</li>
            </ul>
        </div>
    )
}

        search：useSearchParams

 <Link to={`context?id=${item.id}&title=${item.title}&context=${item.context}`}>{item.title}</Link>
----------------------------------------------------------


import React from 'react'
import { useSearchParams } from 'react-router-dom'

export default function Context() {
    const [search, setSearch] = useSearchParams()
    const id = search.get('id')
    const title = search.get('title')
    const context = search.get('context')

    return (
        <div>
            <ul>
                <li><button onClick={() => setSearch('id=008&title=嘿嘿&context=123')}>点我修改</button></li>
                <li>{id}</li>
                <li>{title}</li>
                <li>{context}</li>
            </ul>
        </div>
    )
}

        state：useLoaction

  <Link
       to="context"
       state={{
        id: item.id,
        title: item.title,
        context: item.context
        }}
   >{item.title}</Link>
----------------------------------------------------------

import React from 'react'
import { useLocation } from 'react-router-dom'

export default function Context() {
    const { state: { id, title, context } } = useLocation()
    return (
        <div>
            <ul>
                <li>{id}</li>
                <li>{title}</li>
                <li>{context}</li>
            </ul>
        </div>
    )
}