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;

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

相关推荐
Csvn18 分钟前
Worker 与 OffscreenCanvas
前端
Csvn19 分钟前
图片字体
前端
m0_7381207219 分钟前
JWT 安全从入门到实战:六种典型攻击场景解析
前端·网络·python·安全·网络安全
miofly20 分钟前
GitHub 今日推荐|floorplan:AI 读代码自动画交互式架构地图
javascript·开源·github
拖孩27 分钟前
AI 帮我写的小程序上线 44 天:36 个人进了收银台,8 个人付钱
前端·后端·微信小程序
前端小D28 分钟前
React Native Android 项目搭建
android·react native·react.js
java1234_小锋35 分钟前
【技术专题】CSS3 网页技术 - CSS3 视觉增强
前端·css·css3
Dovis(誓平步青云)1 小时前
拖动关键帧角色就抽动,动画编辑器怎样补齐中间状态
开发语言·前端·javascript·机器学习·编辑器
lpfasd1231 小时前
pywebview与Electron
前端·javascript·electron
行走的陀螺仪1 小时前
Claude Code 从入门到实战(一):安装、登录与第一个Vue项目
前端·javascript·vue.js