React----类式组件路由React-Router（V5）

已于 2022-04-08 14:03:56 修改
阅读量869 收藏
点赞数
分类专栏： React 文章标签： react.js 前端 javascript
于 2022-04-07 17:24:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43778556/article/details/124018110
版权

安装react-router

npm install --save react-router-dom

index.js

//引入react核心库
import React from 'react'
//引入ReactDOM
import ReactDOM from 'react-dom'
//
import {BrowserRouter} from 'react-router-dom'
//引入App
import App from './App'

ReactDOM.render(
	<BrowserRouter>
		<App/>
	</BrowserRouter>,
	document.getElementById('root')
)

传递params参数并实现跳转

传递参数

import React, {Component} from 'react';
import {Link, Route} from "react-router-dom";
import Params from "../params";
import SearchRoute from "../search";
import StateRoute from "../state";

export default class Demo extends Component{
    state={
        messageArr:[
            {id:'001',title:'消息1',content:'锄禾日当午'},
            {id:'002',title:'消息2',content:'汗滴禾下土'},
            {id:'003',title:'消息3',content:'谁知盘中餐'},
            {id:'004',title:'消息4',content:'粒粒皆辛苦'}
        ]
    }
    render() {
        const {messageArr}=this.state
        return (
            <div>
                <h2>params参数</h2>
                <ul>
                    {
                        messageArr.map((item,index)=>{
                            return (
                                <li key={item.id}>
                                    <Link to={`/params/${item.id}/${item.title}/${item.content}`}>params跳转并携带参数</Link>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr />
                {/* 声明接收params参数 */}
                <Route path="/params/:id/:title/:content" component={Params}/>
            </div>
        );
    }
}

接收参数

import React, {Component} from 'react';

export default class Params extends Component{
    render() {
        // 接收params参数
        const {id,title}=this.props.match.params
        return (
            <div>
                params路由数据展示
                <h3>params：id:{id}---name:{title}</h3>
            </div>
        );
    }
}

传递search参数并实现跳转

传递参数

import React, {Component} from 'react';
import {Link, Route} from "react-router-dom";
import Params from "../params";
import SearchRoute from "../search";
import StateRoute from "../state";

export default class Demo extends Component{
    state={
        messageArr:[
            {id:'001',title:'消息1',content:'锄禾日当午'},
            {id:'002',title:'消息2',content:'汗滴禾下土'},
            {id:'003',title:'消息3',content:'谁知盘中餐'},
            {id:'004',title:'消息4',content:'粒粒皆辛苦'}
        ]
    }
    render() {
        const {messageArr}=this.state
        return (
            <div>
                <h2>search参数</h2>
                <ul>
                    {
                        messageArr.map((item,index)=>{
                            return (
                                <li key={item.id}>
                                    <Link to={`/search?id=${item.id}&title=${item.title}&content=${item.content}`}>search跳转并携带参数</Link>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr />
                {/* search参数无需声明接收，正常注册路由即可 */}
                <Route path="/search" component={SearchRoute}/>                                                                                                                                                                                                                                                                                                  
            </div>
        );
    }
}

接收参数

import React, {Component} from 'react';
import qs from 'querystring'

export default class SearchRoute extends Component{

    render() {
        // 接收search参数
        const {search} = this.props.location
        const {id,title} = qs.parse(search.slice(1))
        return (
            <div>
                search路由数据展示
                <br/>
                <h3>search路由携带数据：id:{id}---name:{title}</h3>
            </div>
        );
    }
}

传递state参数并实现跳转

传递参数

import React, {Component} from 'react';
import {Link, Route} from "react-router-dom";
import Params from "../params";
import SearchRoute from "../search";
import StateRoute from "../state";

export default class Demo extends Component{
    state={
        messageArr:[
            {id:'001',title:'消息1',content:'锄禾日当午'},
            {id:'002',title:'消息2',content:'汗滴禾下土'},
            {id:'003',title:'消息3',content:'谁知盘中餐'},
            {id:'004',title:'消息4',content:'粒粒皆辛苦'}
        ]
    }
    render() {
        const {messageArr}=this.state
        return (
            <div>
                <h2>state参数</h2>
                <ul>
                    {
                        messageArr.map((item,index)=>{
                            return (
                                <li key={item.id}>
                                    <Link to={{pathname:'/state',state:{id:item.id,title:item.title,content:item.content}}}>search跳转并携带参数</Link>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr />
                {/* state参数无需声明接收，正常注册路由即可 */}
                <Route path="/state" component={StateRoute}/>
            </div>
        );
    }
}

接收参数

import React, {Component} from 'react';

export default class StateRoute extends Component{

    render() {
        // 接收state参数
        const {id,title} = this.props.location.state || {}
        return (
            <div>
                state路由数据展示
                <br/>
                <h3>state路由携带数据：id:{id}---name:{title}</h3>
            </div>
        );
    }
}

编程式导航

传递params参数并实现跳转

传递参数

import React, {Component} from 'react';
import {Link, Route, Switch, withRouter} from "react-router-dom";
import Params from "../params";
import SearchRoute from "../search";
import StateRoute from "../state";

class Demo extends Component{
    state={
        messageArr:[
            {id:'001',title:'消息1',content:'锄禾日当午'},
            {id:'002',title:'消息2',content:'汗滴禾下土'},
            {id:'003',title:'消息3',content:'谁知盘中餐'},
            {id:'004',title:'消息4',content:'粒粒皆辛苦'}
        ]
    }

    toParams=(item)=>{
        //replace跳转+携带params参数
        this.props.history.replace(`/params/${item.id}/${item.title}/${item.content}`)
        //push跳转+携带params参数
        // this.props.history.push(`/params/${item.id}/${item.title}/${item.content}`)
    }
    render() {
        const {messageArr}=this.state
        return (
            <div>
                <h2>params参数</h2>
                <ul>
                    {
                        messageArr.map((item,index)=>{
                            return (
                                <li key={item.id}>
                                    <button onClick={()=>this.toParams(item)}>params跳转并携带参数</button>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr />
                {/*声明接收params参数 */}
                <Route path="/params/:id/:title/:content" component={Params}/>
            </div>
        );
    }
}
export default withRouter(Demo)

传递search参数并实现跳转

传递参数

import React, {Component} from 'react';
import {Link, Route, Switch, withRouter} from "react-router-dom";
import Params from "../params";
import SearchRoute from "../search";
import StateRoute from "../state";

class Demo extends Component{
    state={
        messageArr:[
            {id:'001',title:'消息1',content:'锄禾日当午'},
            {id:'002',title:'消息2',content:'汗滴禾下土'},
            {id:'003',title:'消息3',content:'谁知盘中餐'},
            {id:'004',title:'消息4',content:'粒粒皆辛苦'}
        ]
    }
    toSearch=(item)=>{
        //replace跳转+携带search参数
        // this.props.history.replace(`/search?id=${item.id}&title=${item.title}&content=${item.content}`)
        //push跳转+携带search参数
        this.props.history.push(`/search?id=${item.id}&title=${item.title}&content=${item.content}`)
    }
    render() {
        const {messageArr}=this.state
        return (
            <div>
                <h2>search参数</h2>
                <ul>
                    {
                        messageArr.map((item,index)=>{
                            return (
                                <li key={item.id}>
                                    <button onClick={()=>this.toSearch(item)}>search跳转并携带参数</button>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr />
                {/* search参数无需声明接收，正常注册路由即可 */}
                <Route path="/search" component={SearchRoute}/>
            </div>
        );
    }
}
export default withRouter(Demo)

传递state参数并实现跳转

传递参数

import React, {Component} from 'react';
import {Link, Route, Switch, withRouter} from "react-router-dom";
import Params from "../params";
import SearchRoute from "../search";
import StateRoute from "../state";

class Demo extends Component{
    state={
        messageArr:[
            {id:'001',title:'消息1',content:'锄禾日当午'},
            {id:'002',title:'消息2',content:'汗滴禾下土'},
            {id:'003',title:'消息3',content:'谁知盘中餐'},
            {id:'004',title:'消息4',content:'粒粒皆辛苦'}
        ]
    }
    toState=(item)=>{
        //replace跳转+携带state参数
        // this.props.history.replace('/state',{
        //     id:item.id,
        //     title:item.title,
        //     content:item.content,
        // })
        //push跳转+携带state参数
        this.props.history.push('/state',{
            id:item.id,
            title:item.title,
            content:item.content,
        })
    }
    render() {
        const {messageArr}=this.state
        return (
            <div>
                <h2>state参数</h2>
                <ul>
                    {
                        messageArr.map((item,index)=>{
                            return (
                                <li key={item.id}>
                                    <button onClick={()=>this.toState(item)}>search跳转并携带参数</button>
                                </li>
                            )
                        })
                    }
                </ul>
                <hr />
               {/* state参数无需声明接收，正常注册路由即可 */}
                <Route path="/state" component={StateRoute}/>
            </div>
        );
    }
}
export default withRouter(Demo)
十友九
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【React】React-router使用及源码 (类组件)
Alberqing_的博客
09-19 443
本篇文章来自：方一鸣要实现哪些内容？BrowserRouterRouteLinkSwitchwithRouteruseHistoryuseLocationuseParamsuseRout...
组件化路由
zhuxincheng_1218的专栏
08-20 411
文章目录组件化优点组件化缺点组件拆分项目的几个常见模块router(target-action) 组件化优点 低耦合，大项目拆分 单独开发、单独测试 便于多人协作开发 组件化缺点 版本同步比较繁琐 组件拆分 功能拆分 (轮播器, 网络框架, 图片加载) 业务拆分 (登录, 聊天, 商城等等) 项目的几个常见模块 1.主工程 2.课程项目 3.分类项目 4.登录项目 5.网络框架 6....
[React类式组件路由配置]React类式组件路由配置
CC_Waiting的博客
08-24 339
【代码】[React类式组件路由配置]React类式组件路由配置。
2024年前端最新react-router-dom V6 中文文档教程总结_reactrouter6中文文档(2)，2024前端大厂高频面试题
最新发布
2401_84616922的博客
05-13 1126
获取路由参数 ，在以往的react-router-dom版本中，路由的三个参数location、history、match都是直接挂载到组件的props身上，即使组件不是路由组件，也可以使用withRouter高阶组件对普通组件进行增强，也可以将这三个参数带到props身上。编程式路由导航，在非受控组件中可以使用useNavigate这个钩子进行导航，而在类组件中无能为力，只能想办法使用这个标签，非常的麻烦，可以看看这篇文章：https://www.jianshu.com/p/5bdfd2fac2cd。
React ReactRouter、路由的使用、路由的相关组件(笔记)
weixin_60547084的博客
07-22 679
一个路由就是一组映射关系（key-value)key为路径,value可能是function或component。
React组件和路由
weixin_44923277的博客
05-15 654
组件通信 父子通信 父组件将一个数据传递给子组件，但是这个数据只有父组件有权利更改，子组件不可以 ```class Father extends Component{ constructor(){ super() this.state={ name:'臭弟弟' } } changeName = () ...
react-router-pro:基于react-router的中国习惯版，集中配置路由，极简化配置缓存路由，方便配置中后台标签页，不依赖其他第三方库，即插即用
05-14
基于react-router的中国习惯版，包含：集中配置路由、缓存路由、移动端路由，路由之间可无缝切换，极简配置。（赠人玫瑰手有余香，辛苦码字，留个星呗） 文档 用法 安装 npm i react-router-pro 使用 import {...
详解如何给React-Router添加路由页面切换时的过渡动画
12-03
本文将详细介绍如何在React-Router v5（兼容v4）中使用react-transition-group库来实现页面切换时的过渡效果。 首先，我们要知道在Vue中，我们可以利用内置的`<transition>`组件轻松地添加过渡动画。而在React中，...
next-with-react-router-v5
03-21
React Router比Next的路由器灵活得多，并且可以轻松地在路由之间甚至深度嵌套的路由之间共享布局和状态。要使用Next.js做到这一点，需要将所有共享逻辑整合到一个自定义_app.tsx组件中，并使用。如果您正在构建单页...
react-keepalive-router:基于react 16.8 +开发的react缓存组件，react router 4 +可用于缓存页面组件，类似于Vue keepalive包Vue路由器效果功能。（基于react 16.8 +，react-router 4+开发的react缓存组件，可以用作缓存页面组件，类似vue的Keepalive包装vue-router的效果功能）
03-18
基于react 16.8+ ， react-router 4+开发的react缓存组件，可以用作缓存页面组件，类似vue的keepalive封装vue-router的效果功能。 采用react hooks全新api ，支持缓存路由，手动解除缓存，增加了缓存的状态周期，...
react-router实现跳转传值的方法示例
08-30
在React应用中，React Router是常用的路由管理库，它允许我们定义不同的路由并根据URL的变化渲染对应的组件。在实际开发中，我们常常需要在跳转到另一个页面时传递参数，以便接收页面能够获取这些参数并进行相应的...
React----函数组件路由React-Router（V6）
王延朕的博客
04-07 2029
安装react-router yarn install --save react-router index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import {BrowserRouter} from "react-router-dom"; ReactDOM.render( <React.StrictMode
React-class——路由（简介、基本使用、路由组件懒加载、路由传参、嵌套路由、路由认证）
qq_52301431的博客
10-12 1090
React构建的是单页面应用，使用路由实现页面跳转。通过管理 URL，实现组件的切换和状态的变化: 实现了路由的核心功能，提供了router的核心api。如Router、Route、Switch等，但没有提供有关dom操作进行路由跳转的api；: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签。路由模式分为：BrowserRouter(history)（不带#号）和HashRouter（带#号）。
react路由用法
weixin_45261845的博客
04-24 140
首先 用BrowserRoute组件包含整个应用结构 其次 如果路径以"/"开头 则在此处渲染Index组件 <Route path="/" component={Index}/> <Route path="/list" component={List}/> 控制页面跳转 <Link to="/">首页</Link> 动态路由匹配 //路由传参 路由组件内部props包含match和history属性 //props.match可以用来访问路由信息 //p
React中路由组件的简单使用（5版本）
fps_ll的博客
07-02 382
因为包裹到这里其他组件无法使用,所以可以在App组件外包裹BrowserRouter,例如 之后其他组件只引入Link和Route即可;还有和Link组件一样的,NavLink和Link功能一样,但是NavLink能使选中的高亮配置activeClassName Switch的用法:就是跳转只有一个组件,其他组件不奏效 Redirect重定向 路由组件接收的this.props跟一般组件不一样 都用this.props接收数据withRouter能让普通组件中this.
react编程式路由
weixin_50736511的博客
09-21 657
import React, { Component } from 'react' import { Route, Redirect, Link } from 'react-router-dom' import Detail from './Detail/index' export default class index extends Component { state = { a: [ { id: '01', title: "今天" },
第三十二章 React路由组件的简单使用
天界程序员的博客
05-10 1582
关于路由组件的一些使用以及它们之间的区别，以及编程式的路由使用
组件/路由/vuex
wms_swag的博客
08-16 162
组件 局部功能的界面（包括html、css、js、img等） 自己定义一个组件：例如：1.创建HelloWorld.vue组件 <template> <div> <p class="msg">{{msg}}</p> </div> </template> <script > export default {// 配置对象（与vue一致） //声明接收属性，这个属性就会成为组件的属性 props:['comments
【React】普通组件编编程式路由跳转
ah_biao的博客
04-27 332
在普通组件中引入路由 import { withRouter } from 'react-router-dom' 使用withRouter方法向外暴露组件 export default withRouter(ParkMap) 跳转 goWithPage = params => { this.props.history.push({ pathname: '/page', state: { params } }) } 另一个页面接收参数 注意：如果另一个页面也是组件，重复第一步，第.
react-router v5路由跳转
07-27
回答: 在使用react-router v5进行路由跳转时，首先需要安装react-router-dom依赖。如果你使用了TypeScript，还需要安装@types/react-router-dom来提供类型声明，以避免报错。\[1\]安装命令如下：npm i react-router-dom@5.2.0 @types/react-router-dom@5.3.3 --save。 接下来，在项目中注册路由。你需要在项目的入口文件中引入BrowserRouter组件，并将你的路由组件包裹在其中。这样，你就可以在应用中使用路由进行页面跳转了。\[2\] 使用react-router进行页面跳转是学习react的基本功之一。你可以根据自己的项目需求，选择合适的方式进行跳转。可以使用Link组件进行导航，也可以使用编程式导航，通过history对象进行跳转。\[3\]具体的使用方法可以参考react-router的官方文档，里面有详细的示例和说明。 #### 引用[.reference_title] - *1* *2* [【react学习】react-router-dom v5如何进行路由跳转](https://blog.csdn.net/qq_39844855/article/details/131184144)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [React路由 | 介绍几种常用的react-router-v5的方法](https://blog.csdn.net/CVSvsvsvsvs/article/details/93410181)[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^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值