react-router-dom V5与V6 的区别

  1. v6 中 Switch 名称变为 Routes

代码如下:

import { Routes } from "react-router-dom";

function App() {

return (

   <div>


   <Routes>
    .....
 	 </Routes>

  </div>

  );

}
  1. v6 的变化

不再支持子组件和 component , 改为 element

<Route path="/home" >

<Index />

</Route>

<Route path='/login' component={Login}></Route>

改为

<Route path="/home" element={ <Index /> }>

</Route>

<Route path='/login' element={ <Login /> }>

</Route>

注:

element 的值为组件标签,不要忘记写成标签形式

Route 标签必须包含在Routes标签里,会不然报错

  1. v6 中,exact 属性不再需要

v6 内部算法改变,不再需要加exact实现精确匹配路由,默认就是匹配完整路径。

如果需要旧的行为,路径后加/*

<Route path="/products/*" element={<Products />} />

<Route path="/products/:productId" element={<ProductDetail />} />

route属性 路由是否区分大小写

caseSensitive={true}

  1. v6 中,Route 先后顺序不再重要,React Router 能够自动找出最优匹配路径

5.v6 保留Link,NavLink, 但是NavLink的activeClassName属性被移除

删除了 activeClassName 样式,如果想自己给它设置想要的highligh样式.

可以通过style属性修改actived的状态, 通过箭头函数接收到isActive参数值;

style接收一个css样式数据返回值进行修改 active状态样式。

import { NavLink } from "react-router-dom";

export default function Invoices() {

return (

<div style={{ display: "flex" }}>


<NavLink

style={({ isActive }) => {

  return {

  display: "block",

  margin: "1rem 0",

  color: isActive ? "red" : ""

            };
    
        }}



to={`/invoices`}

>

</NavLink>

</div>

  );

}



// or



<NavLink className={({ isActive }) => isActive ? "red" : "blue"} />
  1. v6 移除 Redirect组件,改为使用 Navigate:
#5
<Redirect to="/home" />

#6
<Route path="/" element ={<Navigate replace to="/welcome" />} />

是对旧的 Redirect 的完整取代。

replace 属性也可以省略,不过行为由 replace 改为 push

  1. v6 嵌套路由改为相对匹配

嵌套路由必须放在 中,且使用相对路径,不再像 v5 那样必须提供完整路径,因此路径变短。

<Route path='/about' element={<About />}>
    <Route index element={<Address />} />

    <Route path='address' element={<Address />}></Route>

    <Route path='information' element={<Information />}></Route>

    <Route path='joinus' element={<Join />}></Route>
</Route>

8.使用Outlet组件,此组件是一个占位符,告诉 React Router 嵌套的内容应该放到哪里。

import {Outlet} from “react-router-dom”;

const Welcome=() => {

return

<section>


  <h1>Welcome</h1>

  <Outlet />

</section>

}



export default Welcome;

  1. 使用index 指定默认路由, 或者path为空

当嵌套路由有多个子路由的时候,可以增加 index 属性来指定默认路由。

function App()

  return (
    <Routes>

      <Route path="/" element={<Layout />}>

      <Route index element={<About />} />

      <Route path="user" element={<User />} />

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

      </Route>

    </Routes>
       );

}

或者

设置path为空,来指定默认路由,代码如下:

let router  =[{

  path: "/home",

  element :<Home/ >,

  children: [
{

path:"",

element:<News/>

},

{

path: " news " ,

element:<News/>

}
  ]

}]
  1. v6 用useNavigate实现编程式导航,useHistory被移除
import {useNavigate} from "react-router-dom";

const navigate = useNavigate();

navigate("/welcome");   // push
 navigate('/b', { state: { name: 'zhou' } })

如果要重定向:

navigate("/welcome",{replace:true});

除此之外,还可以使用navigate(-1)后退到前一页,使用navigate(-2)后退到前一页的前一页,navigate(1)前向导航,依此类推。

使用 useLocation 接收 useNavigate传递过来的值

// 接收跳转传过来的值
import { useLocation } from 'react-router-dom'
const location = useLocation()
const { state } = location
console.log(location, state);
  1. hooks 中获取参数的方法

useParams

返回当前动态路由参数

function Profile() {

  const params = useParams()

  console.log(params.userId)

  return ()

}

useSearchParams

使用 useSearchParams hook 来访问查询参数(/xx/xx?userId=123)。其用法和 useState 类似,会返回当前对象和更改它的方法。

更改 searchParams 时,必须传入所有的查询参数,否则会覆盖已有参数。

function Profile() {

  const params = useSearchParams()

  console.log(params.userId)

  return ()

}


  1. useRoutes 声明式的路由配置方式

声明式路由中,不能写index, 可以让path: “” , 来实现显示默认组件;

useRoutes函数,会返回已经渲染好的路由元素

let element = useRoutes([
{

  path: "/",

  element: <Dashboard />,

  children: [

      {

        path: "",

        element: <DashboardMessages />

      },

      {

        path: "/messages",

        element: <DashboardMessages />

      },

      { path: "/tasks", element: <DashboardTasks /> }

  },

  { path: "/team", element: <AboutPage /> }

]);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值