react跳转传参方式

React中跳转页面并传递参数可以使用React Router。以下是基本示例:

  1. 在主页中定义路由:

    import { Route, BrowserRouter as Router } from 'react-router-dom';
    import Home from './Home';
    import Detail from './Detail';

    const App = () => (






    );

    export default App;

  2. 在主页中添加链接:

    import { Link } from 'react-router-dom';

    const Home = () => (

    Home

    • Detail 1
    • Detail 2
    • Detail 3
    );

    export default Home;

  3. 在详情页中获取参数:

    import { useParams } from 'react-router-dom';

    const Detail = () => {
    let { id } = useParams();
    return (


    Detail {id}



    );
    }

    export default Detail;

此时点击链接会跳转到对应的详情页,并在详情页中显示传递的参数。

相关推荐
江华森12 小时前
HTTP 再邂逅:报文结构、请求方法、状态码与 Cookie/Session
前端
szephyr13 小时前
前端错误监控实战:用 Sentry 把线上报错从“用户反馈“变成“主动发现“
前端·sentry·稳定性·前端监控·错误监控
拖孩13 小时前
给小程序加「一键发公众号贴图」,我把 wx.shareToOfficialAccount 的三个坑趟了一遍
前端·后端·微信小程序
ONLYOFFICE13 小时前
团队协作软件指南:主要类型、核心功能、选型建议等
前端·onlyoffice·office
志尊宝13 小时前
Vue3 零基础每日笔记(048):嵌套路由与命名视图——后台管理系统布局雏形
前端·javascript·vue.js·笔记·html5
Mr.Meng_9513 小时前
彻底搞懂Promise.allSettled:用法、场景、源码手写、面试题详解
前端
心易行者14 小时前
Python在线运行+SQLite数据库实战:0成本搭个人数据后台,5个场景直接套用
前端·网络·人工智能·python
@tangguo12314 小时前
npm 和 yarn 配置说明
前端·javascript·npm·node.js·yarn
zhiyouTech14 小时前
GEO实战:把生成式引擎优化当成检索工程来做(含五断点诊断与50题Benchmark)
前端·人工智能