08-React路由6.3.0(高亮, 嵌套, 参数传递... )

React-Router-Dom(路由版本[6])

与5版本的区别

内置组件变化: 移除了<Switch>,新增了<Routes>等

语法的变化: component={About} 改为了 element={About}

新增了多个Hook: useParams, useNavigate, useMatch等

官方明确推荐函数式组件了

添加依赖

yarn add react-router-dom

默认安装的就是6.3.0

Component

• Routes

• • 使用Routes组件替换Switch组件, Route在使用时外部必须包裹Routes

• element

• • Route组件使用element属性替换了component属性完成组件的渲染

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

• Navigate

• • 使用Navigate组件替换了Redirect组件完成重定向功能

# 方式一
<Route path={"/"} element={<Navigate to={"/home"}/>}/>
# 方式二
import React, {useState} from 'react';
import {Navigate} from "react-router-dom";

function About(props) {
    const [sum, setSum] = useState(1)
    return (
        <div>
            <h2>this is about!</h2>
            {sum === 2 ? <Navigate to={'/home'} replace={true} /> : <h2>当前Sum的和为:{sum}</h2>}
            <button onClick={()=>setSum(2)}>点我将sum变成2</button>
        </div>
    );
}

export default About;

• caseSensitive

• • Route组件的属性 作用于是否区分路由的大小写

<Route path={"/home"} caseSensitive element={<Home/>}/>

• 组件高亮效果

• • 使用className+函数替换了原有的activeClassName

# 编写样式
.active{
  background-color: orange;
  color: white;
}
# 引入样式
import './App.css'
# 定义函数
const isActive = ({isActive}) => isActive?'active':''
# className使用函数
<NavLink to={"/home"} className={isActive}>home</NavLink>
<NavLink style={{marginLeft: '10px'}} to={"/about"} className={isActive}>about</NavLink>

Hooks

• useRoutes

• • 使用useRoutes可以实现路由表的功能

# 定义路由表
const elements = useRoutes([
    {
        path:'/home',
        element:<Home />
    },
    {
        path:'/about',
        element:<About />
    },
    {
        path:'/',
        element:<Navigate to={"/home"} />
    }
])
# 使用方式
<div>
    {/*    注册路由*/}
    {elements}
</div>

• 嵌套路由

const elements = useRoutes([
  {
    path:'/home',
    element:<Home />,
    // 嵌套路由
    children:[
      {
        path:'news',
        element:<News />
      },
      {
        path:'message',
        element:<Message />
      }
    ]
  },
  {
    path:'/about',
    element:<About />
  },
  {
    path:'/',
    element:<Navigate to={"/home"} />
  }
])

<div>
    <h2>this is home!</h2>
    <div>
        <NavLink to={"news"}>news</NavLink>
        <NavLink to={"message"} style={{marginLeft: '10px'}}>message</NavLink>
    </div>
    <hr/>
    <div>
        {/* 指定路由组件的呈现位置 */}
        <Outlet />
    </div>
</div>

• params方式传递参数

# 定义路由
const elements = useRoutes([
  {
    path:'/home',
    element:<Home />,
    // 嵌套路由
    children:[
      {
        path:'news',
        element:<News />
      },
      {
        path:'message',
        element:<Message />,
        children:[
          {
            // 在路由中是用:属性的方式传递
            path:'detail/:id/:name/:age',
            element:<Detail />
          }
        ]
      }
    ]
  },
  {
    path:'/about',
    element:<About />
  },
  {
    path:'/',
    element:<Navigate to={"/home"} />
  }
])
import React from 'react';
import {NavLink, Outlet, useParams,useSearchParams, useLocation} from "react-router-dom";

function Message(props) {
  const msgs = [
    {id: '1', name: 'html', age: 18},
    {id: '2', name: 'css', age: 19},
    {id: '3', name: 'js', age: 20}
  ]
  return (
    <div>
      <h2>this is Message!</h2>
      <ul>
        {
          msgs.map(msg => {
            return (
              <li key={msg.id}>
                {/*传递方式*/}
                <NavLink to={`detail/${msg.id}/${msg.name}/${msg.age}`}>{msg.name}</NavLink>
              </li>
            )
          })
        }
      </ul>
      <hr/>
      <Outlet />
    </div>
  );
}

export function Detail(props) {
  // 使用useParams Hook接收
  const params = useParams()
  console.log(params);
  return (
    <div>
      <h3>id:{params['id']}</h3>
      <h3>name:{params['name']}</h3>
      <h3>age:{params['age']}</h3>
    </div>
  )
}

export default Message;

• search方式传递参数

# 将路由改为正常方式
children:[
  {
    path:'detail',
    element:<Detail />
  }
]
import React from 'react';
import {NavLink, Outlet, useParams,useSearchParams, useLocation} from "react-router-dom";

function Message(props) {
  const msgs = [
    {id: '1', name: 'html', age: 18},
    {id: '2', name: 'css', age: 19},
    {id: '3', name: 'js', age: 20}
  ]
  return (
    <div>
      <h2>this is Message!</h2>
      <ul>
        {
          msgs.map(msg => {
            return (
              <li key={msg.id}>
                {/*通过?的方式传输参数*/}
                <NavLink to={`detail?id=${msg.id}&name=${msg.name}&age=${msg.age}`}>{msg.name}</NavLink>
              </li>
            )
          })
        }
      </ul>
      <hr/>
      <Outlet />
    </div>
  );
}

export function Detail(props) {
  // 使用useSearchParams hook获取
  const [search,setSearch] = useSearchParams()
  return (
    <div>
      {/*setSearch用于更新参数*/}
      <button onClick={()=>{setSearch('id=4&name=react&age=20')}}>更新参数</button>
      {/* 需要调用get方法获取值 */}
      <h3>id:{search.get('id')}</h3>
      <h3>name:{search.get('name')}</h3>
      <h3>age:{search.get('age')}</h3>
    </div>
  )
}

export default Message;

• state方式传递参数

# 不需要改变
children:[
  {
    path:'detail',
    element:<Detail />
  }
]
import React from 'react';
import {NavLink, Outlet, useParams, useSearchParams, useLocation} from "react-router-dom";

function Message(props) {
  const msgs = [
    {id: '1', name: 'html', age: 18},
    {id: '2', name: 'css', age: 19},
    {id: '3', name: 'js', age: 20}
  ]
  return (
    <div>
      <h2>this is Message!</h2>
      {
        msgs.map(msg => {
          return (
            <span key={msg.id} style={{marginLeft:'10px'}}>
              {/*state 方式传递参数*/}
              <NavLink to={'detail'} state={{
              id:msg.id,
              name:msg.name,
              age:msg.age,
            }}>{msg.name}</NavLink>
            </span>
          )
        })
      }
      <hr/>
      <Outlet/>
    </div>
  );
}

export function Detail(props) {
  // 使用useLocation hook 获取location对象, 然后从location对象上获取state
  const location = useLocation()
  const {id,name,age} =location.state
  return (
    <div>
      <h3>id:{id}</h3>
      <h3>name:{name}</h3>
      <h3>age:{age}</h3>
    </div>
  )
}

export default Message;

• 编程式路由导航

<button onClick={()=> {showDetail(msg)}}>查看</button>
# 使用useNavigate实现编程式路由导航
const navigate = useNavigate()
# 配置目前就支持replace: 跳转方式,state参数
const showDetail = msg => {
    navigate('detail',{
        replace:true,
        state:{
            ...msg
        }
    })
    console.log()
}
# 实现前进和后退
<button onClick={()=>{ navigate(1) }}>前进</button>
<button onClick={()=>{ navigate(-1) }}>后退</button>

• useInRouterContext

• • 用于判断是否处于路由上下文, 是就返回true, 否则返回false, 被BrowserRouter包裹里面的就是处于

• useNavigationType

• • 返回当前的导航类型(用户是通过什么方式跳转到当前页面的)
  • 返回值:

• • POP : 刷新页面来到的, 或者回退
  • PUSH: 压栈的方式
  • REPLACE: 替换栈顶

• useOutlet

• • 用来呈现当前组件中渲染的嵌套路由
  • 如果嵌套路由没有挂载,就返回Null, 否则展示嵌套的路由对象

• useResolvedPath

• • 入参一个url值, 解析其中的path,search,hash值