React（七）：Router基本使用、嵌套路由、编程式导航、路由传参、懒加载

已于 2023-03-17 08:51:22 修改
阅读量1.6k 收藏 8
点赞数 4
分类专栏： React.js 文章标签： react.js javascript 前端 ecmascript 前端框架
于 2023-03-08 21:21:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42044763/article/details/129392474
版权

React（七）

一、React-Router的基本使用

1.安装和介绍

安装：

npm install react-router-dom

react-router最主要的API是给我们提供的一些组件:BrowserRouter或HashRouter

其中BrowserRouter使用history模式;

import React from "react"
import ReactDOM from "react-dom/client"
import { BrowserRouter } from "react-router-dom"
import App from "./App"

const root = ReactDOM.createRoot(document.querySelector("#root"))

root.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
)

HashRouter使用hash模式：

import React from "react"
import ReactDOM from "react-dom/client"
import { HashRouter } from "react-router-dom"
import App from "./App"

const root = ReactDOM.createRoot(document.querySelector("#root"))

root.render(
  <HashRouter>
    <App/>
  </HashRouter>
)

2.路由的配置和跳转

在App中通过使用Routes和Route组件指定路由的出口，path属性指定对应路径，element属性指定要切换的组件实例。

通过Link组件实现路由的跳转，to属性指定切换的路径

import React, { PureComponent } from 'react';
import Home from './pages/Home';
import Search from './pages/Search';
import Detail from './pages/Detail';
import {Routes, Route, Link} from 'react-router-dom';

export class App extends PureComponent {
  render() {
    return (
      <div>
        <div className="header">
          Header<hr />
          <Link to='/home'>点击切换到Home</Link><hr />
          <Link to='/detail'>点击切换到detail</Link><hr />
          <Link to='/search'>点击切换到search</Link><hr />
        </div>
        <div className="content">
          中间的路由内容
          <Routes>
            <Route path='/home' element={<Home />} />
            <Route path='/detail' element={<Detail />} />
            <Route path='/search' element={<Search />} />
          </Routes>
        </div>
        <div className="foorer">Footer</div>
      </div>
    )
  }
}

export default App

在这里插入图片描述

3.Navigate的使用

Navigate用于路由的重定向，当这个组件出现时，就会执行跳转到对应的to路径中

比如我们举个例子，用户来到登录页：
如果没登陆就显示登录按钮；
如果点击登录按钮，就把状态设置为登录，然后就自动跳转到home页。

import React, { PureComponent } from 'react'
import { Navigate } from 'react-router-dom';

export class Login extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false
    }
  }

  login() {
    this.setState({
      isLogin: true
    })
  }
  render() {
    let { isLogin } = this.state;
    return (
      <div>
        <h1>Login</h1>
        {!isLogin ? <button onClick={(() => this.login())}>登录</button> : <Navigate to='/home'/>}
      </div>

    )
  }
}

export default Login

还有就是路由的重定向问题，如果遇到地址只有一个/，那么就导航至home页（或者其实直接写Home组件 <Route path='/' element={<Home />} />也可以的）

  <Routes>
    <Route path='/' element={<Navigate to='/home' />} />
    <Route path='/home' element={<Home />} />
    <Route path='/detail' element={<Detail />} />
    <Route path='/login' element={<Login />} />
  </Routes>

4.如果找不到对应的路由路径？

此时我们可以设置path='*'时（找不到路径时），自动路由跳转到某个组件，给用户提示

  <Routes>
    <Route path='/' element={<Navigate to='/home' />} />
    <Route path='/home' element={<Home />} />
    <Route path='/detail' element={<Detail />} />
    <Route path='/login' element={<Login />} />
    <Route path='*' element={<NotFound />} />
  </Routes>

在这里插入图片描述

二、嵌套路由的用法

在vue中我们需要去配置children这个配置项，但是在react中，不需要噢。

比如我要在Home里面搞个导航栏切换对应的内容：

在这里插入图片描述
那么首先先建三个组件：

在这里插入图片描述

然后来到App，在Home页的这个Route标签中间写嵌套的路由，这里的第一行是一个重定向，如果进入Home页，默认导航至第一个组件Column1：

在这里插入图片描述
然后回到Home页，设置跳转的标签和子路由的出口<Outlet>：

在这里插入图片描述

当然啊Outlet啊，Route啊，Link啊这些组件别忘了引入。

三、编程式路由导航

React-router给我们提供了一个hook，名字叫useNavigate，调用它可以返回一个函数，我们调用这个函数并把path传给它就可以实现随时通过点击事件进行路由的跳转。

但是既然是hook，那么就只能在函数式组件中使用，如果要在类组件中使用呢？

1.类组件中使用useNavigate

在类组件中想要使用hook并不是不可以，我们可以通过一个高阶组件，给类组件注入这个hook，然后通过props就能调用并传参。

在做高阶组件时，返回的应该是一个函数式组件（如果是类组件不还是用不了吗），然后把useNavigate的返回值（一个函数）注入进去

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

export default function enhanceUseNavigate(Component) {
    //这里要通过函数式组件注入，因为类组件里不能用噢
    return function(props) {
        let navigate = useNavigate();
        return <Component {...props} navigate={navigate}/>
    }
}

然后另一边使用高阶组件，并且点击按钮时调用传path就行了，这样就可以实现跳转。

export class App extends PureComponent {
  navigateTo(path) {
    //在这里就可以调用注入的跳转函数，传入path进行路由跳转
    this.props.navigate(path);
  }

  render() {
    return (
      <div>
        <div className="header">
          Header<hr />
          <button onClick={() => this.navigateTo('/home')}>点击按钮跳转到Home</button>
          <button onClick={() => this.navigateTo('/detail')}>点击按钮跳转到detail</button>
          <button onClick={() => this.navigateTo('/login')}>点击按钮跳转到登录页</button>
        </div>
        <div className="content">
          <h4>中间的路由内容：</h4>
          <Routes>
            <Route path='/' element={<Navigate to='/home' />} />
            <Route path='/home' element={<Home />} />
            <Route path='/detail' element={<Detail />} />
            <Route path='/login' element={<Login />} />
            <Route path='*' element={<NotFound />} />
          </Routes>
        </div>
        <div className="foorer">Footer</div>
      </div>
    )
  }
}

export default enhanceUseNavigate(App);

2.函数式组件中使用useNavigate

这东西本来就是为函数式组件而生的，所以在这里使用简直是妙蛙种子到了米奇妙妙屋，妙到家了。

function App() {
  let navigate = useNavigate();
  
  function navigateTo(path) {
    navigate(path);
  }

  return (
      <div>
        <div className="header">
          Header<hr />
          <button onClick={() => this.navigateTo('/home')}>点击按钮跳转到Home</button>
          <button onClick={() => this.navigateTo('/detail')}>点击按钮跳转到detail</button>
          <button onClick={() => this.navigateTo('/login')}>点击按钮跳转到登录页</button>
        </div>
        <div className="content">
          <h4>中间的路由内容：</h4>
          <Routes>
            <Route path='/' element={<Navigate to='/home' />} />
            <Route path='/home' element={<Home />} />
            <Route path='/detail' element={<Detail />} />
            <Route path='/login' element={<Login />} />
            <Route path='*' element={<NotFound />} />
          </Routes>
        </div>
        <div className="foorer">Footer</div>
      </div>
    )
}

export default App;

四、路由跳转传参

1.设置好路径的占位符（params）

类似于vue中的params参数
注意，写了占位，如果不传，那么路径就会置空

在这里插入图片描述

通过拼接:参数名可以设置参数的key，这样的话就可以把参数的value通过Link或编程式导航传给Detail组件。

那么参数怎么接呢？

这里要提到另一个hook用来接收参数，useParams，但是呢如果Detail组件是一个类组件，那么我们就要用高阶组件给它注入这个东西：

拿刚才那个高阶组件举例吧，还是同样的方法，把params注入给Detail的props。

import { useNavigate, useParams } from "react-router-dom";

export default function enhanceUseNavigate(Component) {
    //这里要通过函数式组件注入，因为类组件里不能用噢
    return function (props) {
        let navigate = useNavigate();
        let params = useParams();
        let router = { navigate, params };
        return <Component {...props} router={router} />
    }
}

最后来到Detail组件，可以直接读取，参数传过来放到对象里，我们就能去读它的id，或者用它发请求什么的。

import React, { PureComponent } from 'react';
import enhanceUseNavigate from '../utils/enhanceUseNavigate';

export class Detail extends PureComponent {
  render() {
    let { params } = this.props.router;
    console.log(params);//{id: '123'}
    return (
      <div>
        <h1>Detail</h1>
        <h2>收到路由跳转传来的参数：{params.id}</h2>
      </div>
    )
  }
}

export default enhanceUseNavigate(Detail)

2.参数直接拼接到url中（query）

类似vue中的query参数

在这里插入图片描述
直接在跳转的地方拼接url参数，那么怎么接呢？

这里用到另一个hook：useSearchParams

当然在函数式组件中用会比较合适，但是这里我们在类中演示吧，还是用高阶组件，拿之前那个举例：

import { useNavigate, useParams, useSearchParams } from "react-router-dom";

export default function enhanceUseNavigate(Component) {
    //这里要通过函数式组件注入，因为类组件里不能用噢
    return function (props) {
        // 1.导航
        const naviagte = useNavigate()

        // 2.动态路由的参数
        const params = useParams()

        // 3.查询字符串的参数
        const [searchParams] = useSearchParams()
        // console.log(searchParams.get('name'))
        const query = Object.fromEntries(searchParams.entries())
        console.log(query);
        const router = { naviagte, params, query}

        return <Component {...props} router={router} />
    }
}

这里的写法没怎么见过，先记住吧。总之就是把传过来的url参数变成一个对象，里面存着键值对格式的参数。同样我们注入到Login组件中，就可以接到参数了

import React, { PureComponent } from 'react'
import enhanceUseNavigate from '../utils/enhanceUseNavigate';;

export class Login extends PureComponent {
  render() {
    let { query } = this.props.router;
    return (
      <div>
        <h1>Login</h1>
        <h2>拿到query参数！{query.name}-{query.age}</h2>
      </div>
    )
  }
}

export default enhanceUseNavigate(Login)

五、路由的配置文件

目前我们所有的路由都配置在组件中，用标签的形式写出来的，这样会比较乱，那么我们想像vue一样有自己的独立配置，react给我们提供了这样的hook

比如我们要把下面这一堆路由关系配置成一个单独的文件

<div className="content">
  <h4>中间的路由内容：</h4>
   <Routes>
     <Route path='/' element={<Navigate to='/home' />} />
     <Route path='/home' element={<Home />} >
       <Route path='/home' element={<Navigate to='/home/column1' />}></Route>
       <Route path='/home/column1' element={<Column1 />}></Route>
       <Route path='/home/column2' element={<Column2 />}></Route>
       <Route path='/home/column3' element={<Column3 />}></Route>
     </Route>
     <Route path='/detail/:id' element={<Detail />} />
     <Route path='/login' element={<Login />} />
     <Route path='*' element={<NotFound />} />
   </Routes>
 </div>

大概就是这样的：

import Home from '../pages/Home';
import Login from '../pages/Login';
import Detail from '../pages/Detail';
import NotFound from '../pages/NotFound';
import Column1 from '../pages/Column1';
import Column2 from '../pages/Column2';
import Column3 from '../pages/Column3';
import { Navigate } from 'react-router-dom';

let routes = [
    {
        path:'/',
        element: <Navigate to='/home'/>  //重定向
    },
    {
        path:'/home',
        element: <Home/>,
        children: [
            {
                path:'/home',
                element: <Navigate to="/home/column1"/> //重定向
            },
            {
                path:'/home/column1',
                element: <Column1/>
            },
            {
                path:'/home/column2',
                element: <Column2/>
            },
            {
                path:'/home/column3',
                element: <Column3/>
            }
        ]
    },
    {
        path:'/detail/:id',
        element: <Detail/>
    },
    {
        path:'/login',
        element: <Login/>
    },
    {
        path: '*',
        element: <NotFound/>
    }
]

export default routes;

然后在App中需要导入routes，并且使用hook占位：

在这里插入图片描述
ok搞定

六、路由的懒加载

两步
1、换成这个

在这里插入图片描述
2、包个标签

import { Suspense } from 'react';
......
root.render(
  <HashRouter>
    <Suspense fallback={<h3>路由懒加载加载中！！</h3>}>
      <App />
    </Suspense>
  </HashRouter>
);

这里fallback里的东西是加载没出来的时候显示的东西

DantinZhang
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router-dom 嵌套路由的实现
10-15
主要介绍了react-router-dom 嵌套路由的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
react-router4 嵌套路由的使用方法
08-29
以下是对`react-router4`嵌套路由的详细解释和使用方法。 首先，我们需要引入必要的库，包括`react-router-dom`，它是`react-router`的DOM绑定库，以及`history`库，用于创建浏览器历史记录对象： ```jsx import ...
React-Router详解
虎哥LoveDroid
04-23 8088
React-Router是一款用于构建单页面应用（SPA）中处理路由的JavaScript库。在现代的Web应用中，SPA已经成为了一种常见的应用架构模式，它允许在不刷新整个页面的情况下进行交互式的用户体验。而React-Router作为React生态系统中的路由管理工具，为开发者提供了一种简洁、灵活且强大的方式来处理应用中的页面导航和状态管理。React-Router在React应用中的重要性不可忽视。它不仅仅是简单的URL路由管理工具，更是一个可以帮助开发者构建复杂SPA的工具集。
React-route详解-11
最新发布
编程是一门实践技术
05-30 1062
对于多页面应用而言，一个 URL 对应的就是一个 HTML 页面，**而对于单页面应用，一个 URL 对应的其实是一个组件的展示，可以通过 URL 来控制 UI 或者 HTML 的展示**，这就是Reate-route。React Router 包含了三个库： - react-router： 提供最基本的路由功能； - react-router-dom： 在浏览器中使用； - react-router-native： 在 react-native app开发时中使用，web开发时用不到； React 路由
react-router详解
热门推荐
输入技术、输出想法
05-02 2万+
react-router详解react-router详解路由的基本使用安装react-router使用react-router头部一般组件主体内容路由组件路由组件与一般组件NavLink与封装NavLinkSwitch的使用解决多级路径刷新页面样式丢失的问题路由的严格匹配与模糊匹配Redirect的使用嵌套路由向路由组件传递参数编程式路由导航BrowserRouter与HashRouter的区别 react-router详解 React Router 是一个基于 React 之上的强大路由库，它可以让你向应
React Router 全面整理
大灰狼的小绵羊哥哥的博客
04-13 5916
React router 已经到了 V5 版本，增加了基于 React Hooks 的一些 API，比如 useParams、useHistory 等等，让我们可以在组件中不接受 route props 就可以拿到路由信息 { match, location, location }，除了利用了 React Hooks，React router 中还有其他充分展示了 React 特性的 API，比如 利用了 render props，withRouter 利用了高阶组件。另外，就像 React 家族中的其他成
react实现路由懒加载
weixin_45481456的博客
07-10 2573
react实现路由懒加载
react-router-sample:使用嵌套路由React路由器示例
04-21
React路由器样本用嵌套路由来React路由器示例。用法yarnyarn dev执照麻省理工学院执照版权所有（c）2021 Alexander Zeitler 特此免费授予获得此软件和相关文档文件（“软件”）副本的任何人无限制地处理软件的权利，...
react-router-Demo:react路由嵌套 传参
05-17
该项目是通过引导的。... 使用AJAX请求获取数据与API后端集成节点Ruby on Rails 在开发中代理API请求配置代理后出现“无效的主机头”错误手动配置代理配置WebSocket代理在开发中使用HTTPS 在服务器上生成动态<met
react router
juse__we的博客
04-17 1997
参考网站：http://react-guide.github.io/react-router-cn/docs/API.html api http://react-guide.github.io/react-router-cn/docs/API.html 路由配置 路由配置是一组指令，用来告诉 router 如何匹配 URL以及匹配后如何执行代码。 添加首页 想象一下当 URL 为/...
基于 react-router 嵌套路由与配置化路由
小天才程序员的博客乐园
04-06 9319
React Router嵌套路由与配置化路由
react路由懒加载lazyLoad
wanghe1111_的博客
05-05 3945
懒加载是指在项目中浏览器第一次加载项目时，如果不使用懒加载技术，则第一次浏览器加载项目时进行读取并下载所有路由组件资源，所以当组件很多时，就会造成浏览器卡死状态；如果使用了懒加载技术，那么每当跳转一个路由，才会吧此路由对应的组件进行下载读取资源并渲染，所以渲染性能就比较好。
深入ReactRouter：从快速上手到嵌套路由配置的全面指南
让技术为我所用
01-19 2384
本博客深入探讨了在React中使用React Router v6进行路由配置的关键概念。涵盖了路由的快速上手、抽象路由模块、导航、导航传参、嵌套路由、默认二级路由、404路由配置以及两种路由模式。通过这篇博客，读者能够全面了解React Router v6的用法，为构建灵活的React应用提供了实用的路由配置知识。
ReactRouter基础
u012106430的博客
03-01 1233
react路由的使用
【React-Router】嵌套路由
小秀的博客
11-22 787
各个主流框架的路由常用的路由模式有俩种，history 模式和 hash 模式, ReactRouter分别由 createBrowerRouter 和 createHashRouter 函数负责创建。在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由。当访问的是一级路由时，默认的二级路由组件可以得到渲染。以下案例希望设置面板组件为二级默认组件得到渲染。
React 之Router路由（含5.0与6.0版本）
qq_45799465的博客
04-19 9004
一、路由介绍 二、事前准备 2.1 安装路由模块 2.2 相关组件 三、V5版本路由使用 3.1 声明式导航 3.2 编程式导航 3.3 嵌套路由 3.4 路由传参 3.5 重定向 与 404 3.6 三种路由的渲染方式【了解】 3.7 withRouter高阶组件 3.8 自定义导航组件 四、V6版本路由使用 4.1 声明式导航 4.2 编程式导航 4.3 重定向与404 4.4 传参 4.5 嵌套路由 4.6 批量配置路由
「React进阶」react-router v6 通关指南
奇舞周刊
02-28 2995
一 前言 不知不觉 react-router 已经到了 v6 版本了，可能很多同学发现，v6相比之前的 v5 有着翻天覆地的变化，因为最近接触到了 React 的新项目，用到了 v6 版本...
React路由懒加载的实现
一个前端工程师
12-31 5980
React路由懒加载的实现
react-router-dom v6 嵌套路由
08-21
在React Router v6中，嵌套路由的使用方式略有不同。你可以使用`<Route>`组件来定义嵌套路由，并使用`element`属性指定要渲染的组件。下面是一个示例： ```jsx import { Route, Routes } from 'react-router-dom'; import { News } from './News'; import { Message } from './Message'; export const Home = () => { return ( <div> <h3>Home</h3> <div> <ul className="nav nav-tabs"> <li> <MyNavLink to="news">News</MyNavLink> </li> <li> <MyNavLink to="message">Message</MyNavLink> </li> </ul> {/* 注册路由 */} <Routes> <Route path="news" element={<News />} /> <Route path="message" element={<Message />} /> </Routes> </div> </div> ); }; ``` 在上面的代码中，我们使用`<Routes>`组件包裹了多个`<Route>`组件，每个`<Route>`组件定义了一个嵌套路由的路径和要渲染的组件。例如，当路径为"/news"时，会渲染`<News>`组件。这样，当用户访问"/news"时，`<News>`组件就会被渲染在嵌套路由的位置上。 希望这能回答你的问题！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [React Router v6 路由配置，嵌套路由](https://blog.csdn.net/Snow_GX/article/details/123656412)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [react-router-dom v6版本 嵌套路由](https://blog.csdn.net/jzh1359314792/article/details/126526047)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值