React【Link && NavLink、Navigate、params传参、search传参、createSearchParams、state传参、useRoutes、基于路由懒加载】(九)

迷南。 2024-02-20 09:20 47阅读 0赞

![3bf0a8abbeda4d068e04a3bed56df26b.gif][]

**目录**

Link && NavLink

Navigate

路由传递参数\_params传参

路由传递参数\_search传参

路由传递参数\_createSearchParams

路由传递参数\_state传参

useNavigate 传参

useRoutes

基于路由懒加载

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

### Link && NavLink ###

###     ###

![3655f866466c4fe492f67b12f78541e6.png][]

**<Link>**

用户可以通过点击它来导航跳转到另一个页面。

props：  
 **to** :设置点击后要跳转的页面地址  
**string** ：to的值为字符串，代表要跳转的路径  
**object** : to的值为对象，该对象可以包含下列属性：  
pathname: **<string>** 表示要链接到的路径  
search: **<string>** 查询参数  
hash: 一个放在URL中的Hash，例如 \#a-hash.

<Link to="/">首页</Link>
    <Link to="/user">用户页面</Link>
    {/*<Link to={
       {pathname:'/user'}} >用户页面</Link>*/}

**reloadDocument** :跳过路由，则直接实现 <a href/> 的功能  
**state** :location.state参数

**<NavLink>**  
一个特殊的 **<Link>** ，它会知道当前被选中的项是哪个。被选中选会添加 **.active** class。

<NavLink to="/"  style={({ isActive }) => {
                  return isActive ? { color:'red' } : undefined
               }}>首页</NavLink>
    <NavLink to="/user"  style={({ isActive }) => {
                  return isActive ? { color: 'red' } : undefined
               }}>用户页面</NavLink>

### **Navigate**    ###

![b773c28e34364e7ba6b814c9c3e32671.png][]

当渲染一个 **<Navigate>** 元素的时候，就会执行它指向的路由跳转。

一般逻辑发生变化后，想要跳转到其他页面（非手动点击方式）使用。

//index.js
    <Routes>
          <Route path='/login'  element= {<Login/>}/>
          <Route path="/" element={<App />}>
          <Route index element={<Home />}/>
          <Route path="user" element= {<User />}  caseSensitive>
             <Route path='item' element= {<Item/>} />
             </Route>
           </Route>
    </Routes>

//pages/Login.js
    import React, { useRef, useState } from 'react'
    import { Navigate } from 'react-router-dom'
    export default function Login() {
        const nameRef = useRef()
        const pwdRef = useRef()
        const [isLogin, setIsLogin] = useState()
        const onLogin = (e) => {
            // 阻止默认事件
            e.preventDefault()
            // 如果输入了用户名跟密码。则登录成功，跳转到首页
            if (nameRef.current.value && pwdRef.current.value) {
                setIsLogin(true)
           }
       }
        return (
            <div>
                <h2>登录</h2>
                <form onSubmit={onLogin}>
                   用户名：<input ref={nameRef} required/>
                   密码：<input type='password' ref={pwdRef} required/>
                    <button type='submit'>登录</button>
                </form>
               {/* isLogin为ture,则跳转到首页 */}
               {isLogin&&<Navigate to='/' />}
            </div>
       )
    }

### 路由传递参数\_params传参    ###

![e175446b8294412084c62222f3dd3db2.png][]

在要跳转的路由路径中使用 **:params** 这种语法传递参数，然后在跳转后的页面中使用 **useParams** 读取传递过来的参数。

<Route path="user/:city" element={<User />}/>
     {/* 设置参数的key值 */}

{/* 跳转路由的时候传递参数，参数值为beijing */}
    <NavLink to="user/beijing"  style={({ isActive }) => {
                  return isActive ? { color: 'red' } : undefined
               }}>用户页面</NavLink>

import {  Outlet, useParams } from 'react-router-dom'
    function User(props) {
    const params= useParams()
    //获取传递过来的参数
    console.log(params)//{city:'xiaotong'}
      return <>
        < h2>我是用户页面</h2>
        <Outlet />
      </>
    }

### 路由传递参数\_search传参    ###

![4435c31190cf4561ba33d4eb14f42c29.png][]

如果 **to** 接收一个对象，则可以通过对象的属性search传递参数：

{/* 通过search属性传递参数 */}
    <NavLink to= {
       {pathname:'user',search:`city=${'xiaotong'}`}} style={({ isActive }) => {
                  return isActive ? { color: 'red' } : undefined
               }}>用户页面</NavLink>

通过 **useSearchParams()** 获取参数：

function User(props) {
    // 通过useSearchParams读取通过search传递的参数
    const [searchParams,setSearchParams]=useSearchParams()
    console.log(searchParams.get('city'))//xiaotong
      return <>
        < h2>我是用户页面</h2>
        <Outlet />
      </>
    }

### 路由传递参数\_createSearchParams    ###

![98956749a25f415dacd9765450bdf536.png][]

使用 **createSearchParams** 支持传递对象或者数组

<NavLink to=
    {
       {pathname:'user',search:`${createSearchParams({city:'xiaotong',arr:'[1,2,3]'})}`}} style=
    {({ isActive }) => {
                  return isActive ? { color:'red' } : undefined
               }}>用户页面</NavLink>

function User(props) {
    // 通过useSearchParams读取通过search传递的参数
    const [searchParams,setSearchParams]=useSearchParams()
    console.log(searchParams.get('city'))//xiaotong
    console.log(JSON.parse(searchParams.get('arr')) )//[1,2,3]
      return <>
        < h2>我是用户页面</h2>
       {/* 将来 */}
        <Outlet />
      </>
    }

### 路由传递参数\_state传参    ###

![5ebbea41115b4c79b66fa56a693d0ba7.png][]

通过 **state** 属性传递参数：

<NavLink to='user' state= {
       {city:'beijing',arr:[1,2,3]}} style={({ isActive }) => {
                  return isActive ? { color: 'red' } : undefined
               }}>用户页面</NavLink>

使用 **useLocation** 来接收state传递的参数，useLocation会返回一个 location对象，只要浏览器地址发生改变，则这个location就会随着更新。

import { useLocation } from 'react-router-dom'
    function User(props) {
        
    // 通过useLocation读取通过state传递的参数
        const location = useLocation()
        console.log(location)
        console.log(location.state)//访问location的state属性即可
        return <>
            < h2>我是用户页面</h2>
        </>
    }

**useNavigate**

![a8210e0f22f14afe89cfb400608090e7.png][]

这个hook返回一个函数，这个函数可以让我们进行编程式路由跳转。

import React, { useRef, useState } from 'react'
    import { Navigate, useNavigate } from 'react-router-dom'
    export default function Login() {
        const nameRef = useRef()
        const pwdRef = useRef()
        const navigate = useNavigate()
        // const [isLogin,setIslogin]=useState()
        const onLogin = (e) => {
            e.preventDefault()
            if (nameRef.current.value && pwdRef.current.value) {
                // setIslogin(true)
                navigate('/')
           }
       }
        return (
            <div>
                <h2>登录</h2>
                <form onSubmit={onLogin}>
                   用户名：<input ref={nameRef} required />
                   密码：<input type='password' ref={pwdRef} required />
                    <button type='submit'>登录</button>
                </form>
               {/* 如果isLogin为true，则跳转到首页*/}
               {/* {isLogin && <Navigate to='/'/>} */}
            </div>
       )
    }

### useNavigate 传参 ###

![baed6c37285f4c8b955c74c9facf8492.png][]

params传参

<Routes>
              <Route path="/" element={<App/>}>
                <Route index element={<Home/>} />
               {/* 设置参数的key值 */}
                <Route path="user/:city" element={<User />} />
              </Route>
              <Route path='/login' element= {<Login />} />
            </Routes>

<button onClick= {()=>navigate('/user/xiaotong')}>用户页
    </button>

function User(props) {
        //通过useParams获取参数
         const params= useParams()
         console.log(params)//{city:'xiaotong'}
      
        return <>
            < h2>我是用户页面</h2>
            
        </>

search传参

<button onClick={() => navigate({pathname:'user',search:`city=xiaotong`})}>用户页</button>

function User(props) {
        
         const [searchParams,setSearchParams]=useSearchParams()
         console.log(searchParams.get('city'))//xiaotong
        
        return <>
            < h2>我是用户页面</h2>
            
           {/* 将来 */}
           {/* <Outlet /> */}
        </>
    }

state传参

<button onClick={() => navigate('user', {state:{city:'xiaotong'}})}>用户页</button>

function User(props) {
       //通过useLocation获取state传递的参数
        const location = useLocation()
        console.log(location)
        console.log(location.state)
      
        return <>
            < h2>我是用户页面</h2>
          
        </>
    }

### useRoutes ###

![23a912e076d444459c5eb01c6496f5fa.png][]

**useRoutes** 跟 **<Routes>** 有同等的功能，只不过它使用对象来替代**<Route>** 。

//router.js
    import { useRoutes, HashRouter, useNavigate,
    Route, Routes } from 'react-router-dom'
    import Home from './pages/Home'
    import App from './App'
    import User from './pages/User'
    import Login from './pages/Login'
    export default <HashRouter >
            <Routes>
                <Route path="/" element={<App/>}>
                    <Route index element={<Home/>} />
                   {/* 设置参数的key值*/}
                    <Route path="user" element={<User />} />
                </Route>
                <Route path='/login' element={<Login />} />
            </Routes>
        </HashRouter>

//index.js
    import React, { useState, useMemo, useEffect
    } from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import reportWebVitals from './reportWebVitals';
    import router from './router'
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
       {router}
       {/* 引入路由 */}
      </React.StrictMode>
    );
    // // If you want to start measuring performance in your app, pass a function
    // // to log results (for example: reportWebVitals(console.log))
    // // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
    // reportWebVitals();

等同于

//router.js
    import { useRoutes, HashRouter, useNavigate,
    Route, Routes } from 'react-router-dom'
    import Home from './pages/Home'
    import App from './App'
    import User from './pages/User'
    import Login from './pages/Login'
    export default function () {
        const element = useRoutes([
           {
                path: '/',
                element: <App />,
                children: [
                   { path: '', element: <Home/> },
                   { path: 'user', element: <User />},
               ]
           },
           {
                path: '/login',
                element: <Login />
           }
       ]
       )
        return element
    }

//index.js
    import React, { useState, useMemo, useEffect } from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import reportWebVitals from './reportWebVitals';
    import Router from './router'
    import { HashRouter } from 'react-router-dom';
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
        <HashRouter>
           <Router/>
        </HashRouter>
      
      </React.StrictMode>
    );
    // // If you want to start measuring performance in your app, pass a function
    // // to log results (for example: reportWebVitals(console.log))
    // // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
    // reportWebVitals();

### 基于路由懒加载    ###

### ![def33a4ba4684b8ea66f79e0747dfef6.png][] ###

//router.js
    import React,{Suspense} from 'react'
    import { useRoutes, HashRouter, useNavigate,
    Route, Routes, Navigate, BrowserRouter } from 'react-router-dom'
    import App from './App'
    import Home from './pages/Home'
    const User=React.lazy(()=>import('./pages/User'))
    const Login=React.lazy(()=>import('./pages/Login'))
    export default  <BrowserRouter >
    <Suspense fallback={<div>页面跳转中...</div>}sss>
        <Routes>
            <Route path="/" element={<App />}>
                <Route index element={<Home />}/>
    
                <Route path="user" element= {<User />} />
            </Route>
            <Route path='/login' element={<Login />} />
        </Routes>
    </Suspense>
    </BrowserRouter>

[3bf0a8abbeda4d068e04a3bed56df26b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/03a656ca9de64b5e9861b04e3e3e36ff.png
[3655f866466c4fe492f67b12f78541e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/5a55a0b9019d43d2b03f88a27a5f8f03.png
[b773c28e34364e7ba6b814c9c3e32671.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/d08979ec1c1646b29574af7581a9007d.png
[e175446b8294412084c62222f3dd3db2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/31d9d9599e904147b891712d401bd315.png
[4435c31190cf4561ba33d4eb14f42c29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/8a574edf9c9d42689c71be3a302f5c9d.png
[98956749a25f415dacd9765450bdf536.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/5a6cdf5966714beb8325fba3267cac2a.png
[5ebbea41115b4c79b66fa56a693d0ba7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/495e37c4643b429787355d633fb6b1c7.png
[a8210e0f22f14afe89cfb400608090e7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/3f7a66ff098445138a847ebed814e17f.png
[baed6c37285f4c8b955c74c9facf8492.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/ddd4f884e1dd4d85b4a4252d995c61bd.png
[23a912e076d444459c5eb01c6496f5fa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/6c62f68d9bbd41f792e03c54d55da918.png
[def33a4ba4684b8ea66f79e0747dfef6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/eff7347f1ce741be923bea53e13f5ee0.png