react多级路由的嵌套使用及参数的传递

最新推荐文章于 2024-08-13 22:27:09 发布
最新推荐文章于 2024-08-13 22:27:09 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014496893/article/details/111941503
版权

一级路由/home    /about

import React, { Component } from "react";
import { Route, Switch,Redirect } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import MyNavLink from "./components/MyNavLink";
import Header from "./components/Header";

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header />
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">
              {/* 原生html中，靠<a>跳转不同的页面 */}
              {/* <a className="list-group-item" href="./about.html">About</a>
							<a className="list-group-item active" href="./home.html">Home</a> */}

              {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
              <MyNavLink to="/about">About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                {/* 注册路由,switch可以匹配某一个路由，之后就不会在向下匹配了，可以提高匹配的效率 */}

                <Switch>
                  <Route path="/about" component={About} />
                  <Route path="/home" component={Home} />
                  <Redirect to="about"/>{/*当前面的路径都没有匹配上的时候，就会重定向到about*，一般用处页面一开始进来的时候做数据展示的首页*/}
                </Switch>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

二级路由：home组件里面有二级路由，/home/news和/home/message,因为每一次路由的变化都是从根路由出查找，所以，二级路由必须带上/home，否则找不到

import React, { Component } from "react";
import MyNavLink from "../../components/MyNavLink";
import { Switch, Route, Redirect } from "react-router-dom";
import Message from "./Message";
import News from "./News";

export default class Home extends Component {
  render() {
    return (
      <div>
        <h2>Home组件内容</h2>
        <div>
          <ul className="nav nav-tabs">
            <li>
              <MyNavLink to="/home/news">News</MyNavLink>
            </li>
            <li>
              <MyNavLink to="/home/message">Message</MyNavLink>
            </li>
          </ul>
          <Switch>
            <Route path="/home/news" component={News} />
            <Route path="/home/message" component={Message} />
            <Redirect path="/home/news" component={News} />
          </Switch>
        </div>
      </div>
    );
  }
}

父组件向子组件传递参数

路由参数的传递分为三种，在ajax里面的传递参数的形式分别是：params参数，query参数，body参数

在react路由里面传递参数对应的就是：params，search, state

先结论：向路由组件传递参数

       1、params参数:

                   路由链接（携带参数）：<Link to={`/home/message/detail/${msgaObj.id}/${msgaObj.title}`}>{msgaObj.title}</Link>

                   注册路由（声名接收）：<Route path="/home/message/detail/:id/:title" component={Detail}></Route>

                   接收参数： this.props.match.params

       2、search参数

                   路由链接（携带参数）：<Link to={`/home/message/detail?id=${msgaObj.id}&title=${msgaObj.title}`}>{msgaObj.title}</Link>

                   注册路由（声名接收）：<Route path="/home/message/detail" component={Detail}></Route>

                   接收参数： this.props.location.search                

                   备注： 获取的search是urlencode编码的字符串，需要借助querystring解析

      3、state参数

                   路由链接（携带参数）： <Link to={{path:"/home/message/detail",state:{id:msgaObj.id,title:msgaObj.title}}}>{msgaObj.title}</Link>

                   注册路由（声名接收）：<Route path="/home/message/detail" component={Detail}></Route>

                   接收参数： this.props.location.state                

                   备注： 刷新也可以保留住参数

一、传递params参数

import React, { Component } from "react";
import { Route, Link, Switch } from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
  state = {
    messageArr: [
      { id: "01", title: "消息1" },
      { id: "02", title: "消息2" },
      { id: "03", title: "消息3" },
    ],
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgaObj) => {
            return (
              <li key={msgaObj.id}>
                <Link
                  //传递params参数
                  to={`/home/message/detail/${msgaObj.id}/${msgaObj.title}`}
                >
                  {msgaObj.title}
                </Link>
              </li>
            );
          })}
        </ul>
        <hr />
        <Switch>
          <Route
            //params参数用：id/:title占位符
            path="/home/message/detail/:id/:title"
            component={Detail}
          ></Route>
        </Switch>
      </div>
    );
  }
}

在Detail组件中接收params参数使用this.porps.math.params

import React, { Component } from "react";
const DetailData = [
  { id: "01", content: "你好，中国" },
  { id: "02", content: "你好，宝宝" },
  { id: "03", content: "你好，媳妇" },
];
export default class Detail extends Component {
  render() {
    //接收params参数
    const { id, title } = this.props.match.params;
    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id;
    });
    return (
      <div>
        <ul>
          <li>id：{id}</li>
          <li>title:{title}</li>
          <li>content:{findResult.content}</li>
        </ul>
      </div>
    );
  }
}

二、传递query参数，父组件向子组件Detail传递query参数，也叫search参数

import React, { Component } from "react";
import { Route, Link, Switch } from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
  state = {
    messageArr: [
      { id: "01", title: "消息1" },
      { id: "02", title: "消息2" },
      { id: "03", title: "消息3" },
    ],
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgaObj) => {
            return (
              <li key={msgaObj.id}>
                {/* 向路由组件传递search参数 */}
                <Link to={`/home/message/detail?id=${msgaObj.id}&title=${msgaObj.title}`}>{msgaObj.title}</Link>
              </li>
            );
          })}
        </ul>
        <hr />
        <Switch>
          {/* search参数无需声名，正常注册路由即可 */}
          <Route path="/home/message/detail" component={Detail}></Route>
        </Switch>
      </div>
    );
  }
}

子组件Detail接收参数，通过querystring库来解析传递过来的search参数

import React, { Component } from "react";
import qs from "querystring";
const DetailData = [
  { id: "01", content: "你好，中国" },
  { id: "02", content: "你好，宝宝" },
  { id: "03", content: "你好，媳妇" },
];
export default class Detail extends Component {
  render() {
    const { search } = this.props.location;
    //将search里面以&拼接的key value字符串转换成对象
    const { id, title } = qs.parse(search.slice(1));
    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id;
    });
    return (
      <div>
        <ul>
          <li>id：{id}</li>
          <li>title:{title}</li>
          <li>content:{findResult.content}</li>
        </ul>
      </div>
    );
  }
}

三、传递state参数

import React, { Component } from "react";
import { Route, Link, Switch } from "react-router-dom";
import Detail from "./Detail";

export default class Message extends Component {
  state = {
    messageArr: [
      { id: "01", title: "消息1" },
      { id: "02", title: "消息2" },
      { id: "03", title: "消息3" },
    ],
  };
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {messageArr.map((msgaObj) => {
            return (
              <li key={msgaObj.id}>
                <Link to={{path:"/home/message/detail",state:{id:msgaObj.id,title:msgaObj.title}}}>{msgaObj.title}</Link>
              </li>
            );
          })}
        </ul>
        <hr />
        <Switch>
          <Route path="/home/message/detail" component={Detail}></Route>
        </Switch>
      </div>
    );
  }
}

接收state参数

import React, { Component } from "react";
const DetailData = [
  { id: "01", content: "你好，中国" },
  { id: "02", content: "你好，宝宝" },
  { id: "03", content: "你好，媳妇" },
];
export default class Detail extends Component {
  render() {
    //接收state参数
    const { id, title } = this.props.location.state || {};
    const findResult = DetailData.find((detailObj) => {
      return detailObj.id === id;
    })||{};
    return (
      <div>
        <ul>
          <li>id：{id}</li>
          <li>title:{title}</li>
          <li>content:{findResult.content}</li>
        </ul>
      </div>
    );
  }
}

 

量化接口stockapi
关注
专栏目录
React系列：嵌套路由的使用
乐于分享，共同成长
12-17 279
React系列：嵌套路由的使用
开发中React router6路由表多级路由嵌套的默认子路由问题
VX_WJ88950106的博客
08-14 2504
最近小新在写一个基于React Hooks+Mobx+axios+react-router-dom v6+antD的前端项目，在进行二级路由配置时遇到了一些问题。path：" / " 时，重定向到Layout的子组件Home，路径为 " /home "。组件，然后再去重定向，渲染出子组件Home。，用路由表来统一管理路由，但是这个时候问题出现了。但是再一看，当点击其他的子路由，比如这个例子中的。时，他会渲染对应的子路由，但是！这个属性上，再定义一组子路由规则，但是。打开界面一看效果，嘿～还真行，...
React多级路由 React子路由
yj6232779的博客
03-10 3150
React多级路由 React子路由设置 新建一个Home.jsx文件 和Home.css文件 css文件内容就不写了 Home 文件内容如下 为了解决点击Link时，路由变化而子路由页面未变化，所以需要在窗口中加入key属性。 import "./Home.css" import React,{ Component } from "react"; import { BrowserRouter...
react路由嵌套路由及路由传参
q4717529的博客
04-28 305
·因为react的嵌套路由跟vue比就像屎一样 不好写 所以在使用的时候建议使用react-router-config来配置路由 会相对轻松 第一步 先安装路由依赖 yarn add react-router-dom --save yarn add react-router-config --save 第二部 配置路由文件 新建一个routes.js文件 新建pages文件夹和home组件about组件及page2组件 import React from 'react'; import Hom
react多级权限路由
最新发布
qq_47040462的博客
08-13 438
技术栈：react-router-dom、react18、antd、vite-plugin-mock。
React多级路由
qq_41619567的博客
07-20 5867
正常路由 app.js页面 import React, { Component } from 'react'; import '../styles/App.css'; import '../styles/reset.css'; import '../styles/rem.js'; import {Routers} from '../router/router.js' class App ...
react的多级路由定义
qq_41591215的博客
05-15 321
path: 'music', // 一级路由routes: [path: 'clManager', // 二级路由},path: 'clManager/detail', // 三级路由},
React中的嵌套路由,5版本（二级或者多级路由）
weixin_48952990的博客
08-27 684
React中的嵌套路由（二级或者多级路由）
React中无限级嵌套路由的实现（RRD-V6）
Heige博客
07-13 940
React中无限级嵌套路由的实现， React-router-dom v6 无限级嵌套路由的实现。
React Router v6使用路由嵌套和重定向
weixin_64747231的博客
06-14 1187
前言:React Router v5 和 v6 在嵌套路由中实现重定向的方式有所不同。在 v5 中，我们可以使用。而在 v6 中，我们需要使用....。
react实现同页面三级跳转路由布局
10-16
主要为大家详细介绍了react实现同页面三级跳转路由布局，一个路由小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用react-router进行多级路由匹配
zem
10-09 5876
在React-router学习笔记 react-router基本使用中，我做了精确的路由匹配，但是实际上，我们在进行路由匹配的时候，一般是会进行多级路由的匹配，所以这里说说如何进行多级路由的匹配 在使用react-router-dom的Link的时候，我们需要使用to来指定路由，而Route用来显示路由对应得内容，默认情况下，Route 会进行路由的模糊匹配 <Route path="/to...
React路由组件传递参数
Frank---7的博客
05-10 327
向路由组件传递参数 1.params参数 路由链接(携带参数)：<Link to='/demo/test/tom/18'}>详情</Link> 注册路由(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/> 接收参数：this.props.match.params 2.search参数 路由链接(携带参数)：<Link to='/demo/
react 多级路由 子路由切换
Embrace924的博客
12-09 2809
需求案例： 1.当我们在后台管理页面 左侧菜单栏的情况下 2.点击左侧菜单栏 路由变化 右侧内容区域变化 如图： 点击分布式表单出现右侧内容 分布式表单步骤条 3.第一步的路由 为 "form/step-form/step1" 4.当我们输入完成验证通过 点击下一步 路由为 "form/step-form/step2" 4.当我们 点击继续路由为 "form/step-form/step3" 需求简化就是一个 第三级菜单的跳转 文件目录如下...
react安裝使用，父子兄弟传值，三种路由传参详解,组件的生命周期
weixin_52005030的博客
09-16 317
一:使用安装 二:父子间传值:
React页面路由参数传递、嵌套路由
月光晒了很凉快的博客
09-25 489
隐式传参（state），通过地址栏是观察不到的；通过路由对象中的state属性进行数据传递，在落地组件中通过this.props.location.state得到。以“/detail/:id”形式传递的数据，在落地组件中通过this.props.match.params得到。key=value&key=value传递。
raect中嵌套路由的使用(多级路由)
m0_63135041的博客
04-23 682
raect中嵌套路由的使用(多级路由)
react路由传递参数
09-08
一种是通过link路由跳转时，在URL中拼接参数，可以使用params或search参数进行传递。使用params参数时，可以通过this.props.match.params来获取传递的参数，属性名和你声明的名称一样。比如：const {name,age} = ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

量化接口stockapi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值