【React】第十五部分 React-Router6

【React】第十五部分 React-Router6

---

---

15. ReactRouter6

安装 : npm install --save react-router-dom

15.1 注册路由的变化

<Routes/> 和 <Route>

1. 在6版本中移除了<Switch/>,引入了新的替代者:<Routes>,作用一样
2. 但是注意:在使用的时候<Route/>必须要包裹<Routes/>,二者必须配合使用
3. <Route>相当于一个if语句,当路径匹配成功后,呈现对应的组件
4. <Route caseSensitive>中新增一个属性caseSensitive,作用:匹配时是否区分大小写,默认为false
5. <Route component>改为<Route element>

 <Routes>
    <Route path="/about" element={<About/>}></Route>
    <Route path="/home" element={<Home/>}></Route>
</Routes>

15.2 路由重定向

<Navigate/>

1. 作用: 只要<Navigate/>组件被渲染,就会修改路径,切换视图

2. replace属性用于控制跳转的模式

3. 5版本中重定向<Redirect to="/xx"/>

4. 6版本重定向<Route path="/" element={<Navigate to="/xx"/>}></Route>

 <Routes>
   <Route path="/about" element={<About/>}></Route>
   <Route path="/home" element={<Home/>}></Route>
   <Route path="/" element={<Navigate to="/about"/>}></Route>
</Routes>

15.3 NavLink高亮的使用

在5版本中只需要添加activeClassName<NavLink activeClassName="xxx"></NavLink>即可实现

在6版本中想要实现自定义高亮效果需要写成一个函数,该函数可以接收到一个参数,解构后可以获取isActive属性

<NavLink to="/about" className={({isActive})=>isActive ? 'list-group-item xxx' : 'list-group-item'}>About</NavLink>

15.4 useRoutes路由表的使用

注意:只能在函数式组件中使用

在做项目的时候,通常创建一个文件专门存放路由规则在routes.js

import React from 'react'
import { NavLink, useRoutes } from "react-router-dom"
import Home from "./components/Home"
import About from "./components/About"
export default function App() {

    // 根据路由表生成对应的路由规则
    const element = useRoutes([
        {
            path: '/home',
            element: <Home />
        },
        {
            path: '/about',
            element: <About />
        },
        {
            path: '/',
            element: <About />
        }
    ])
    return (
        <div>
            <div>
                <div className="row">
                    <div className="col-xs-offset-2 col-xs-8">
                        <div className="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            <NavLink to="/about" className="list-group-item">About</NavLink>
                            <NavLink to="/home" className="list-group-item">Home</NavLink>
                        </div>
                    </div>
                </div>
                <div className="col-xs-6">
                    <div className="panel">
                        <div className="panel-body">
                            {/* 将路由规则放入对应位置 */}
                            {element}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

15.5 路由的嵌套

1. 子级路径不要写 /
2. 路由跳转的时候,路径不需要写父级的路径也不要写 /
3. 需要配合<Outlet/> 去指定子级路由组件呈现的位置

const element = useRoutes([
        {
            path: '/home',
            element: <Home />,
            children:[
                {
                    // 子级路径不要写 / 
                    path:'message',
                    element:<Message/>
                },
                {
                    // 子级路径不要写 /
                    path:'news',
                    element:<News/>
                }
            ]
        },
        {
            path: '/about',
            element: <About />
        },
        {
            path: '/',
            element: <About />
        }
    ])

import {Outlet} from "react-router-dom"

// 在路由跳转的时候,跳转的路由不需要写父级的路径也不要写 / 
<NavLink to="news" className="list-group-item">News</NavLink>
<NavLink to="message" className="list-group-item">Message</NavLink>

// 需要配合<Outlet/> 去指定路由组件呈现的位置
<Outlet/>

15.6 路由传参和编程式路由导航

15.6.1 传递params参数

 {/* 传递params参数 */}
<NavLink to={`news/${state.title}/${state.contain}`}>跳转News</NavLink>

路由规则中依旧是需要进行占位

export const routes = [
    {
        path: '/home',
        element: <Home />,
        children:[
            {
                path:'news/:title/:contain',
                element:<News/>
            }
        ]
    },
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/',
        element: <Navigate to="/about"/>
    }
]

接收参数的时候使用useParams

import React from 'react'
import { useParams } from 'react-router-dom'
export default function News() {
  let {title,contain} = useParams()
  return (
    <div>
      <ul>
        <li>标题: {title}  --  内容: {contain}</li>
      </ul>
    </div>
  )
}

15.6.2 传递search参数

{/* 传递search参数 */}
<NavLink to={`news?title=${state.title}&contain=${state.contain}`}>跳转News</NavLink>

接收参数使用useSearchParams

import React from 'react'
import { useSearchParams } from 'react-router-dom'
export default function News() {
  /* 
    和使用useState用法有点像
    接收到的是一个数组
      - 数组的第一个参数:接收search参数
      - 数组的第二个参数:修改search参数的方法
   */
  let [search,setSearch] = useSearchParams()
  // 需要注意search参数还得通过get(key)才能取到数据
  let title = search.get('title')
  let contain = search.get('contain')
  return (
    <div>
      <button onClick={()=>{setSearch('title=我是修改后的数据&contain=哈哈哈')}}>点我修改search参数</button>
      <ul>
        <li>标题: {title}  --  内容: {contain}</li>
      </ul>
    </div>
  )
}

15.6.3 传递state参数

{/* 传递state参数 */}
<NavLink to='news' state={{title:state.title,contain:state.contain}}>跳转News</NavLink>

接收参数使用useLocation

import React from 'react'
import { useLocation } from 'react-router-dom'
export default function News() {
  const {state:{title,contain}} = useLocation()
  return (
    <div>
      <ul>
        <li>标题: {title}  --  内容: {contain}</li>
      </ul>
    </div>
  )
}

15.6.4 编程式路由导航

使用useNavigate,通过调用它返回的函数实现编程式路由导航

import React, { useState } from 'react'
import {NavLink,Outlet,useNavigate} from "react-router-dom"
export default function Home() {
  const [state] = useState({id:'001',title:'疫情消息',contain:'疫情快快走'})
  const navigate = useNavigate()
  function handleNav() {
    /* 
        第一种写法
        第一个参数指定具体跳转的路径
        第二个参数配置对象
     */
    navigate('news',{
      replace:false,
      state:{title:state.title,contain:state.contain}
    })

    /*
        第二种写法
        传入具体的数据实现前进、后退
     */
    navigate(1)
    navigate(-1)

  }
  return (
    <div>
        <h3>我是Home组件</h3>
        <button onClick={handleNav}>跳转News</button>
        <hr />
        <Outlet/>
    </div>
  )
}

15.7 路由懒加载的变化

import { lazy, Suspense } from "react";
import { Navigate } from "react-router-dom";

// React 组件懒加载
const TodoList = lazy(() => import("../commponet/TodoList"));
const LazyTest = lazy(() => import("../commponet/LazyTest"));

interface Router {
  name?: string;
  path: string;
  children?: Array<Router>;
  element: any;
}

const routes: Array<Router> = [
  {
    path: "/todolist",
    element: <TodoList/>,
  },
  {
    path: "/lztest",
    // element: <LazyTest />,
    element: (
      <Suspense fallback={<h2>正在加载中....</h2>}>
        <LazyTest />
      </Suspense> 
    ),
  },
  {
    path: "/",
    element: <Navigate to="/home" />,
  },
];

export default routes;

---

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！