代码编织梦想


前言

路由干啥的就先不介绍了

Router的基本使用

安装路由

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

配置路由

在入口文件导入 BrowserRouterHashRouter 组件

// 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:3000Home组件需要匹配 urlhttp://127.0.0.1:3000/home,而About组件需要匹配 urlhttp://127.0.0.1:3000/about,而当前 urlhttp://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

前面所讲的路由跳转方式(LinkNavLink)都是声明式路由导航,现在我们有这么一个需求,点击某个按按钮(<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,下面还有两个路由组件FristHomeSecondHome,这个时候就需要用到路由嵌套

// 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先后顺序不重要

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43011293/article/details/128006665

react-router-dom v6 使用-爱代码爱编程

react-router-dom react-router-dom v6 整体体验相对于 v5 ,体验要好更多,最大的一个改变,就是曾经的 Route 不可嵌套,整个路由配置必须拆分成若干小块,除非通过 react-router-config 这种插件,才可以实现对整个路由的管理,然而现在,不需要任何插件就可实现对路由配置的管理。 官网地址:

升级到 React Router v6-爱代码爱编程

说明 React Router v6 正式版本与 2021-11 月发布,使用起来最大的感受是:全面拥抱 Hooks, 提供简洁的 api, 但是对类组件不是很友好,但是可以通过封装来使用。 与 v5 版本相比 v6 使用 TS 重写,Api 较 v6 有了不少的改动,直接迁移不建议,工作量会很大,官方说会有一个向后兼容包 但是截止 2

浅析React Router V6 useRoutes的使用-爱代码爱编程

本篇文章记录了useRoutes第一个参数的使用方法,暂不涉及第二个参数。 文章目录 一、使用位置二、嵌套路由三、分模块管理注意事项 一、使用位置 一开始以为可以像react-router-config那样使用,于是写成 import { BrowserRouter as Router, useRoutes } from 'react-rou

在React中使用React Router v6-爱代码爱编程

具有多个视图的单页应用程序 (SPA) 需要有一种路由机制,以便在这些不同视图之间导航,而无需刷新整个网页。这可以通过使用诸如React Router之类的路由库来处理。 在本教程中,让我们看看如何使用 React Router v6 库创建路由。本教程将让您了解该库即将推出的一些新功能。 如果你有在 React 应用程序中使用路由的经验,你可能已经知

React Router 升级 v6: Redirect 重定向替代方案-爱代码爱编程

React Router 升级 v6: Redirect 重定向替代方案 文章目录 React Router 升级 v6: Redirect 重定向替代方案React Router v6 Redirect 更新官方推荐方案 1: 使用 Navigate 组件替代官方推荐方案 2: 自定义 Redirect 组件自定义 Redirect 示例: 防

React Router V6变化-爱代码爱编程

官网:React Router 在进行项目时,遇到了React Router升级导致的问题,故特地找来官方API研究,但官方文档还未翻译,借助对V5的理解与翻译软件的帮助对官网的《Upgrading from v5》进行翻译记录。这一篇主要是记录React Router 版本变化,但由于个人开发经验所限,在记录的过程中省去了不熟悉的内容,详细的还是得参考官

React Router v6使用路由嵌套和重定向-爱代码爱编程

前言:v6版本与v5版本差异较大,以下为V6使用路由嵌套及路由重定向方法,子路由路径不用加"/",v6中会自动拼接 App.jsx import React, { Component } from 'react' import { Route,Routes,Navigate} from 'react-router-dom' import About f

React 学习笔记 - react router v6 hooks-爱代码爱编程

React 学习笔记 - react router v6 hooks 前言详解useHref功能示例useInRouterContext功能useLocation功能useMatch功能useNavigate功能示例useNavigationType功能useOutlet功能useParams功能useSearchParams功能useResolv

超超详细ReactRouter v6版本的基本使用-爱代码爱编程

先附上官网的地址:react-router-v6 · GitHub Topics · GitHub 一.概述 React Router 以三个不同的包发布到 npm 上,它们分别为: react-router: 路由的核心库,提供了很多的:组件、钩子。 react-router-dom: 包含react-router所有内容,并添加一些专门

React router v6写法总结-爱代码爱编程

相对v5的变化 Routes 1.Route需要用Routes包裹 2.组件用element表示 3.路由内有嵌套需要加* <Routes> <Route path='/datatable/*'element={<Datatable/>} /> <Route path='/schedul

react router v6实现嵌套路由重定向_阿炜死了的博客-爱代码爱编程

react router在v6版本取消了<Redirect/>,并使用<Navigate to=''/>实现重定向功能。 一级路由重定向 比如访问localhost:3000/ 重定向到 localhost:3000/homepage,我们得这样写: const routerMap = [ { path:

react router v6的基本使用_@魏一的博客-爱代码爱编程

一:概述 React Router 由三个模块组成,分别是: react-router:路由的核心库,提供核心的组件和钩子。react-router-dom:基于react-router,并添加专门用于DOM的组件,例如:<BrowserRouter / >等。react-router-native:基于react-router,并添加专门

最新版react router v6路由写法_胡萝卜不会写代码的博客-爱代码爱编程

react router v6 使用案例 v6 版本相比v5使用上发生了一些改变 v6 版本相比v5使用上发生了一些改变 在浏览器中使用路由,从react-router-dom中导入BrowserRouter

深入react源码揭开渲染更新流程的面纱_goclient1992的博客-爱代码爱编程

转前端一年半了,平时接触最多的框架就是React。在熟悉了其用法之后,避免不了想深入了解其实现原理,网上相关源码分析的文章挺多的,但是总感觉不如自己阅读理解来得深刻。于是话了几个周末去了解了一下常用的流程。也是通过这篇文章将

使用react router v6 进行身份验证完全指南_react 18 router6 登录验证-爱代码爱编程

React Router v6是React应用程序的一个流行且功能强大的路由库。它提供了一种声明式的、基于组件的路由方法,并能处理URL参数、重定向和加载数据等常见任务。 这个最新版本的React Router引入了很多新

react router (v6)_react router中的index-爱代码爱编程

一、对比 V5 <Route> 特性变更 path:与当前页面对应的URL匹配。 element:新增,用于决定路由匹配时,渲染哪个组件。代替v5的component和render。 <Routes&

react router v6的使用以及v5升级v6的一些问题-爱代码爱编程

前言 什么是spa?单页和多页的区别? 传统的多页应用: 改变url请求对应的html资源 单页: 单页一次请求所有的资源, 首屏加载会比较慢,后续通过路由切换组件,只需要请求数据 优缺点: 单页首屏渲染耗时多,不利