React Router v6的基本使用

最新推荐文章于 2023-07-06 12:01:30 发布
最新推荐文章于 2023-07-06 12:01:30 发布
阅读量423 收藏 2
点赞数 1
分类专栏： React 文章标签： react.js javascript 前端 typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43011293/article/details/128006665
版权

Router v6的基本使用

前言

路由干啥的就先不介绍了

Router的基本使用

安装路由

npm install react-router-dom
npm install @types/react-router-dom

配置路由

在入口文件导入 BrowserRouter 或 HashRouter 组件

// index.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals()

基本用法

// app.tsx
import React from 'react'
import { Link, Route, Routes } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

function App() {
  return (
    <div>
      <Link to='/'>Home</Link>
      <Link to='/about'>About </Link>

      <Routes>
        <Route path='/about' element={<About />} />
        <Route path='/' element={<Home />} />
      </Routes>
    </div>
  )
}

export default App;

Router的用法详解

默认路由 index

// app.tsx
import React from 'react'
import { Link, Route, Routes } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

function App() {
  return (
    <div>
      <Link to='/home'>Home</Link>
      <Link to='/about'>About </Link>

      <Routes>
        <Route path='/about' element={<About />} />
        <Route path='/home' element={<Home />} />
        <Route index element={<Home />} />
      </Routes>
    </div>
  )
}

export default App;

上面这个例子中，如果使用index指定默认路由为Home组件，我们打开网页时，就会默认显示Home组件。
如果我们不使用index指定默认路由，假如当前网页地址为http://127.0.0.1:3000，Home组件需要匹配 url 为http://127.0.0.1:3000/home，而About组件需要匹配 url 为http://127.0.0.1:3000/about，而当前 url 为http://127.0.0.1:3000，匹配不了，所以Home组件和About组件都不会直接显示在页面上，需要我们点击对应的 Link 才会显示对应的组件。

路由重定向 Navigate

// app.tsx
import React from 'react'
import { Link, Navigate, Route, Routes } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

function App() {
  return (
    <div>
      <Link to='/home'>Home</Link>
      <Link to='/about'>About </Link>

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

export default App;

上面这个例子中，Navigate会将http://127.0.0.1:3000/重定向为http://127.0.0.1:3000/home，所以打开网页就会显示Home组件
注意在上面的两个案例中，使用index和Navigate都网页打开就默认显示了Home组件，但是其中还是有一些区别的：

  • 使用index，打开网页时，url还是为http://127.0.0.1:3000
  • 使用和Navigate，打开网页时 url 会自动跳转到http://127.0.0.1:3000/home

选中样式 NavLink

我们希望点击HOME跳转到Home组件，点击ABOUT跳转到About组件，但同时还希望显示Home组件时，HOME能有一个样式（比如HOME这几个字的背景变为红色），显示About组件时，ABOUT能有一个样式，这个时候就需用用到NavLink了

// app.tsx
import React from 'react'
import { Navigate, NavLink, Route, Routes } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
import './App.css'

function App() {
  return (
    <div>
      <NavLink to='/home' className={({ isActive }) => isActive ? "selected" : ""}>HOME</NavLink>
      <NavLink to='/about' className={({ isActive }) => isActive ? "selected" : ""}>ABOUT</NavLink>
      <Routes>
        <Route path='/about' element={<About />} />
        <Route path='/home' element={<Home />} />
        <Route path='/' element={<Navigate to='/home' />} />
      </Routes>
    </div>
  )
}

export default App;

/* App.css */
.selected {
  background-color: red;
}

在({ isActive }) => isActive ? "selected" : ""中，:前面前面写选中的样式，:后面写未选择的样式。

编程式路由导航 useNavigate

前面所讲的路由跳转方式（Link，NavLink）都是声明式路由导航，现在我们有这么一个需求，点击某个按按钮（<button></button>）跳转到特定页面，就需要用到编程式路由导航useNavigate

// app.tsx
import React from 'react'
import { Route, Routes, useNavigate } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

function App() {
  const navigate = useNavigate();

  function goToHome() {
    navigate('/home');
  }

  function goToAbout() {
    navigate('/about');
  }

  return (
    <div>
      <button onClick={goToHome}>Home</button>
      <button onClick={goToAbout}>About</button>
      
      <Routes>
        <Route path='/about' element={<About />} />
        <Route path='/home' element={<Home />} />
      </Routes>
    </div>
  )
}

export default App;

路由嵌套 Outlet

假如路由组件Home，下面还有两个路由组件FristHome和SecondHome，这个时候就需要用到路由嵌套

// app.tsx
// app.tsx
import React from 'react'
import { Link, Route, Routes, } from 'react-router-dom'
import About from './pages/About'
import FristHome from './pages/FirstHome'
import Home from './pages/Home'
import SecondHome from './pages/SecondHome'

function App() {
  return (
    <div>
      <Link to='/home'>Home</Link>
      <Link to='/about'>About </Link>

      <Routes>
        <Route path='/about' element={<About />} />
        <Route path='/home' element={<Home />} >
          <Route path='first' element={<FirstHome />} />
          <Route path='second' element={<SecondHome />} />
        </Route>
      </Routes>
    </div>
  )
}

export default App;

Outlet组件主要起到一个占位用作用，用于标记子路由显示的位置。

// pages/Home.tsx
import React from 'react'
import { Link, Outlet } from 'react-router-dom'

function Home() {
    return (
        <div>
            <h1>Home 组件</h1>
            <Outlet />
            <Link to='first'>FristHome</Link>
            <Link to='second'>SecondHome </Link>
        </div>
    )
}

export default Home

路由表 useRoutes

普通使用

// router/routerCfg
import About from "../pages/About";
import Home from "../pages/Home";

const routerCfg = [
    {
        path: '/home',
        element: <Home />,
    },
    {
        path: '/about',
        element: <About />
    },
]

export default routerCfg;

// app.tsx
import React from 'react'
import { Link, Route, Routes, useRoutes, } from 'react-router-dom'
import routerCfg from './router/routerCfg';

function App() {
  return (
    <div>
      <Link to='/home'>Home</Link>
      <Link to='/about'>About </Link>

      {useRoutes(routerCfg)}
    </div>
  )
}

export default App;

重定向

// router/routerCfg
import { Navigate } from "react-router-dom";
import About from "../pages/About";
import Home from "../pages/Home";

const routerCfg = [
    {
        path: '/home',
        element: <Home />,
    },
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/',
        element: <Navigate to='/home' />
    }
]

export default routerCfg;

路由嵌套

// router/routerCfg
import { Navigate } from "react-router-dom";
import About from "../pages/About";
import FristHome from "../pages/FirstHome";
import Home from "../pages/Home";
import SecondHome from "../pages/SecondHome";

const routerCfg = [
    {
        path: '/home',
        element: <Home />,
        children: [
            {
                path: 'first',
                element: <FristHome />
            },
            {
                path: 'second',
                element: <SecondHome />
            }
        ]
    },
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/',
        element: <Navigate to='/home' />
    }
]

export default routerCfg;

路由懒加载

// router/routerCfg
import React from "react";
import { Navigate } from "react-router-dom";
const About = React.lazy(() => import('../pages/About'));
const FristHome = React.lazy(() => import('../pages/FirstHome'));
const Home = React.lazy(() => import('../pages/Home'));
const SecondHome = React.lazy(() => import('../pages/SecondHome'));

const routerCfg = [
    {
        path: '/home',
        element: <Home />,
        children: [
            {
                path: 'first',
                element: <FristHome />
            },
            {
                path: 'second',
                element: <SecondHome />
            }
        ]
    },
    {
        path: '/about',
        element: <About />
    },
    {
        path: '/',
        element: <Navigate to='/home' />
    }
]

export default routerCfg;

// app.tsx
import React, { Suspense } from 'react'
import { Link, useRoutes } from 'react-router-dom'
import routerCfg from './router/routerCfg';

function App() {
  return (
    <div>
      <Link to='/home'>Home</Link>
      <Link to='/about'>About </Link>
      
      <Suspense fallback={<div>Loading...</div>}>
        {useRoutes(routerCfg)}
      </Suspense>
    </div>
  )
}

export default App;

路由传递参数

params参数 useParams

// app.tsx
import React from 'react'
import { Link, Route, Routes, } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'


function App() {
  const id = '233';
  const name = 'baiyin';

  return (
    <div>
      <Link to={`/home/${id}/${name}`}>Home</Link>
      <Link to='/about'>About </Link>

      <Routes>
        <Route path='/home/:id/:name' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </div>
  )
}

export default App;

// pages/Home.tsx
import React from 'react'
import { useParams } from 'react-router-dom'

function Home() {
    //获取params参数的消息
    const { id, name } = useParams();

    return (
        <div>
            <h1>Home 组件</h1>
            <h2>{id}---{name}</h2>
        </div>
    )
}

export default Home

search参数 useSearchParams

// app.tsx
import React from 'react'
import { Link, Route, Routes, } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'


function App() {
  const id = '233';
  const name = 'baiyin';

  return (
    <div>
      <Link to={`/home?id=${id}&name=${name}`}>Home</Link>
      <Link to='/about'>About </Link>

      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </div>
  )
}
export default App;

// pages/Home.tsx
import React from 'react'
import { useSearchParams } from 'react-router-dom'

function Home() {
    // 接收serach参数
    const [search, setSearch] = useSearchParams();
    const id = search.get("id");
    const name = search.get("name");
    
    return (
        <div>
            <h1>Home 组件</h1>
            <h2>{id}---{name}</h2>
        </div>
    )
}

export default Home

state参数 useLocation

// app.tsx
import React from 'react'
import { Link, Route, Routes, } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'


function App() {
  const id = '233';
  const name = 'baiyin';

  return (
    <div>
      <Link to={`/home`} state={{ id: id, name: name }}>Home</Link>
      <Link to='/about'>About </Link>

      <Routes>
        <Route path='/home' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </div>
  )
}

export default App;

// pages/Home.tsx
import React from 'react'
import { useLocation, useSearchParams } from 'react-router-dom'

function Home() {
    // 接收state参数
    const { state: { id, name } } = useLocation();

    return (
        <div>
            <h1>Home 组件</h1>
            <h2>{id}---{name}</h2>
        </div>
    )
}

export default Home

使用useNavigate传递state参数，接收还是用useLocation。

// app.tsx
import React from 'react'
import { Route, Routes, useNavigate } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

function App() {
  const navigate = useNavigate();
  const id = '233';
  const name = 'baiyin';

  function goToHome() {
    navigate('/home', {
      replace: false,
      state: {
        id: id,
        name: name,
      }
    });
  }

  function goToAbout() {
    navigate('/about');
  }

  return (
    <div>
      <button onClick={goToHome}>Home</button>
      <button onClick={goToAbout}>About</button>

      <Routes>
        <Route path='/about' element={<About />} />
        <Route path='/home' element={<Home />} />
      </Routes>
    </div>
  )
}

export default App;

注意：state参数最好不要用来的传递react state里的需要频繁变动，且需要路由组件做出相应的反馈的数据，state参数需要点击链接，才能向下传递数据。
而传递参数使用路由表的话，把Routes里面的转写成路由表就行了。

注意点

  • 默认情况下就是精确匹配（匹配完整路径），如果像匹配某某一部分，在路径后面加 /*

  • Route能够自动找出最优的匹配路径，Route先后顺序不重要

艾贝尔白音
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析React Router V6 useRoutes的使用
ncgNCGg的博客
01-10 2万+
本篇文章记录了useRoutes第一个参数的使用方法，暂不涉及第二个参数。
react-router v6 hook——useRoutes教程
qq_51574759的博客
12-27 1144
上面的路由系统有一个问题：路由是通过标签形式管理，当有大量路由的时候，其易读性和架构就会变得不好，可以把这种路由模式类比XML，并与Json相比，他们在写法的优缺点上有明显的相似。如果你写过VUE，应该还记得VUE中的路由并不是这样的，而是抽离出来，作为一个对象数组去管理路由。，就会返回一个保存有路由组件的变量，在需要使用的地方。首先可以如图创建路由文件夹，管理路由文件。使用很简单，只需要将刚刚的路由对象传入。字段重定向，我们需要重定向，如从。申明路由使用的组件，而不能使用。字面意识是没有包裹在。
React router(V6)随手笔记.三
fang_my的博客
04-15 533
一.路由表的使用useRoutes 首先我们观察下面的情景: 如果Route过多，会显得整个组件臃肿，且这些信息在我们的布局代码中的出现好像没那么必要。 路由表由此产生,这个hook主要用来解决Routes拥堵在界面上的问题。下面来讲解一下使用规则。我们刚开始使用的时候，还不是那么熟练，我不要急于一下子把它们分开到另一个文件夹内，我们就现在当前页面内引入，就把当前页面想象成我们将要从外部引入的那个routes.js。这样我们写起来就会非常方便，因为<Routes>就在页面上展示着，你对比着抄
react-router-dom v6 useRoutes应用(懒加载多级路由)
qq_18470967的博客
11-30 9395
文章目录前言代码引入方式最终效果 前言 本篇文章编辑环境： 对应的版本 react版本：18.0.0 react-dom版本：18.0.0 react-router-dom版本：6.3.0 由于上一篇写的不是特别好，我就直接重置了这一篇。 我就先附上代码了，这次写的比较简洁易懂。 整个路由的使用逻辑，其实和vue-router类似，本篇主要是懒加载。 这个v6版本的路由依赖 有这俩东西值得关注 import { useRoutes, Outlet } from 'react-router-dom'
03-React路由V6的使用
朝朝忆萍的博客
03-08 947
React路由V6的简单了解
react-router-v6:在此仓库中，我了解了React Router v6的一些基础知识
04-17
Create React App入门该项目是通过引导的。可用脚本在项目目录中，可以运行：yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误...
react-router:react-router 中文文档
04-29
React Router Declarative routing for 文档 Packages 这个存储库是我们使用管理的monorepo。 这意味着我们实际上从相同的代码库发布了几个包到npm，包括: Package Version Docs Description React Router的核心 ...
react-router实现按需加载
01-21
本文使用的 React-router 版本为 2.8.1 React Router自己就有一套按需加载解决方案，将代码拆分成多个小包，在浏览过程中实现按需加载； 如过你的项目搭配了webpack打包工具，那么需要在webpack.config.js的output内...
router-keep-alive:React路由器组件，真正保持活动组件
04-05
欢迎对router-keep-alive做出React :waving_hand: :house: :cow_face: :pig_nose: 仅支持哈希路由模式！ :backhand_index_pointing_left: React路由器组件，真正保持活动组件 安装 yarn add router-keep-alive # ...
基于React18、React-Router V6、Redux Vite2、Ant-Design 开源的一套后台管理框架
最新发布
11-04
Hooks Admin，基于 React18、React-Router V6、React-Hooks、Redux、TypeScript、Vite2、Ant-Design 开源的一套后台管理框架。
react路由v6讲解
sdasadasds的博客
05-19 1715
React-Router V6版本的升级了也有段时间了，部分同学还是对v6版本有一些地方不太理解，今天咱们花10分钟来讲下v5和v6有哪些使用上的差异。 一、 React-Router V6版本 React-Router V6版本常用路由组件和hooks 组件名 作用 说明 <Routers> 一组路由 代替原有<Switch>，所有子路由都用基础的Router children来表示 <Router> 基础路由 Router是可以嵌套的，解决原有V5
5.react-router-dom v6使用useRoutes踩坑点
weixin_44617133的博客
07-06 574
1.路由表 需要用.tsx或.jsx，否则使用赋值给element会报错。2)需要引入Suspense包裹，否则路由未加载，页面会报错。1)使用useRoutes生成路由组件，再放进，否则会报错。2.useRoutes()生成路由。useRoutes的用法。
React Router v6中的更新
qq_37440870的博客
09-01 614
React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步
react-router v6
wanjun_007的博客
09-22 1257
react路由6 新版本路由和老版本的差异，使用区别，API 区别。 新版本路由组件 Router ，Routes ，和 Route 的原理。 Outlet 组件原理。 useRoutes 原理。
升级到React-Router-v6
xiaofeng123aazz的博客
02-28 147
近期完成了公司新项目的开发，相关的技术栈都用到了最新版本，react router 也使用了 v6 的版本，所以借这个机会自己再梳理下 react router v5 与 v6 的区别，以及 v6 一些新特性。而在原有项目还是使用老版本 react router 的情况下，不太建议急着直接升级，可能存在较多的改动。全部换成Route 新特性变更render和component改为element，且支持嵌套路由path支持相对路径；简化path格式，只支持两种动态占位符。
react-router v6详解
m0_52537576的博客
05-21 5679
react-routerv6简单介绍
react-router-dom v6的路由懒加载形式，这里写了两种
qq_18470967的博客
11-29 1万+
前言 react-router-dom第6版本的这个Route改动的有点小大 之前的路由渲染方式是按照 // v6版本之前的 <Route path={router.path} component = { router.component } /> 在v6版本中，这个组件改动有点小大，把component这个属性改成了element，传进去的组件需要使用个尖括号包起来 // v6 <Route path={router.path} element = { <router.
react-router-dom V6 中文文档教程总结
热门推荐
xm1037782843的博客
10-21 1万+
react-router-dom v6 使用文档教程 react-router-dom
react router v6的基本使用
05-10
下面是 React Router v6 的基本使用： 1. 安装 React Router v6 ``` npm install react-router-dom@next ``` 2. 在你的代码中导入 `BrowserRouter` 和 `Routes` 组件 ```javascript import { BrowserRouter, ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值