react-router-dom v6 使用

目录

第一章 ：react-router-dom 简述

第二章 ：v5 和 v6 区别

第三章 ：简单的使用

前言

react-router-dom v6 距离更新也是有段时间了，相比于v5 来说，使用起来更加的方便，体积也更小，赶紧跟着我快速上手吧

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、react-router-dom 简述

演示代码所使用的是这个版本┗|｀O′|┛ 嗷~~ 

1.下载

 npm install react-router-dom --save 
 
 // 或

 yarn add react-router-dom

2. 路由方面

 简单的路由大致需要引用这些

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

二、v5 和 v6 区别

1.路由

   BrowserRouter   v6 的使用和v5 并无区别

   Routes  代替  v5 的 Switch

   Route  属性有所变化  去掉了原来的 component   render   由element属性实现

   Navigate  代替 v5 的  Redirect

   path 路径可以省略 "/"  和 上一级的路径拼接，加上也不会影响 

import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom'
import Home from '../page/Home'
import Order from '../page/Order'
import User from '../page/User'

<BrowserRouter>
    <Routes>
        {/* 一级路由 */}
        <Route path='home' element={<Home />}>
            {/* 二级路由 */}
            <Route path='user' element={<User />}></Route>
        </Route>
        <Route path='order' element={<Order />}></Route>
        {/* 重定向 */}
        <Route path='/' element={<Navigate to="/home" />}></Route>
    </Routes>
</BrowserRouter>

      

这里有个注意的点二级路由需要在对应的一级路由添加一个路由出口

v6 新增的api        Outlet 直接解决这个问题 

 感觉非常Nice ！！！

例如：

import React from 'react';
import { Outlet } from 'react-router-dom'
const Home = () => {
    return (
        <div>
            home
            {/* 路由出口 */}
            <Outlet />
        </div>
    );
}

export default Home;

 重定向问题也很好的处理 ，目前本人只发现这一种方法实现重定向  QAQ

例如 ：

 <Route path='/' element={<Navigate to="/home" />}></Route>

v6 仅支持2种占位符：动态:id样式参数和  *通配符

<Route path='*' element={<NotFound/>}></Route>

 <Route path=':id' element={<My/>}></Route>
 <Route path='/detail/:id' element={<My/>}></Route>

1.路由跳转----Link

import { Link } from 'react-router-dom'

<Link to='user'>子路由跳转</Link>
<Link to='/order'>正常跳转</Link>

如果是往当前路由下的二级路由跳转则不需要  "/"

同级路由或其他路由，路径需要写全

2.路由跳转----NavLink

import { NavLink } from 'react-router-dom';
  
<NavLink to='user'>子路由跳转</NavLink>
<NavLink to='/order'>正常跳转</NavLink>

NavLink 是 Link 的一个特定版本，可以添加特定的属性，样式 && 逻辑，和以前版本一样不过多介绍 

3.useNavigate

useNavigate 替代以前的 history   

import React from 'react';
import { useNavigate } from 'react-router-dom'

const Home = () => {
    const navigate = useNavigate()
    return (
        <div>
            home
            <div onClick={() => navigate('/order')}>
                普普通通的跳转
            </div>
            <div onClick={() => navigate('/order', { state: { a: 123 } })}>
                还能带个参数的跳转</div>
            </div >
    );
}

export default Home;

4.useLocation

传参就要接收参数

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

const Order = () => {
    const location = useLocation()
    console.log(location);
    return (
        <div>

        </div>
    );
}

export default Order;

4.useParams

获取地址栏参数

1.如果是这么跳转路由，那么就要用到这个啦  (⊙o⊙）

我传的id  是  1

<div onClick={() => navigate(`/home/user/${id}`)}>拼接地址栏传参大法</div>

2.参数来了来了

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

const User = () => {
    const params = useParams()
    console.log(params);
    return (
        <div>
            
        </div>
    );
}

export default User;

---

 三 ：简单的使用

来个简单的递归

 这是路由表

import Home from '../page/Home'
import Order from '../page/Order'
import User from '../page/User'

const pages = [
    {
        path: 'home',
        element: <Home />,
        name: 'home',
        children: [
            {
                path: 'user/:id',
                element: <User />,
                name: 'user'
            }
        ]
    },
    {
        path: 'order',
        element: <Order />,
        name: 'order'
    },
    {
        from : '/',
        to : '/home'
    }
]

export default pages

来个组件

import pages from "./page"
import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom'

const Router = () => {
    const mapRouter = (routes) => (
        routes.map((item, idx) => (
            item.path
                ? <Route path={item.path} element={item.element} key={idx}>
                    {   /* 如果有子路由 , 递归渲染 */
                        item.children && mapRouter(item.children)
                    }
                </Route>
                : <Route path={item.from} element={<Navigate to={item.to}/>} key={idx}></Route>
        ))
    )
    return (
        <BrowserRouter>
            <Routes>
                {mapRouter(pages)}
            </Routes>
        </BrowserRouter>
    )
}

export default Router

最后一点路由守卫，可以使用高阶组件在Route 里面实现

发现原来的说法可能有些人看不懂，修改了一下，详细++，不过这次是额外添加了ts

要啥传啥就没问题了吧

差不多就到这了...  有问题欢迎评论指点

 

总结

总的来说这个版本我很喜欢,我所提及的都是很基本的，简单易上手