使用react.js 在单页应用程序中导航

2024-01-24

我正在使用 React 和 Backbone 构建一个单页面应用程序,并试图找出处理应用程序中内容之间导航的最佳实践。我的应用程序将有一个侧边栏,其中包含链接,例如“照片”和“设置”。侧边栏始终存在,因此单击“设置”后,我希望在不重新加载整个页面的情况下呈现设置组件。 Slack 是我正在寻找的一个很好的例子,点击不同的频道可以切换对话内容,但不会重新加载整个页面。

我对如何实现这个有一些想法,但我不确定什么是最好的:

  1. 有一个通用的 React 组件 (console.jsx),它接受 url 参数作为 prop 来确定要渲染的内容(照片或设置)。

或者 2. 拥有一个通用的 React 组件并定义一个状态变量来表示要渲染的内容。

任何帮助将不胜感激!


你听说过反应路由器吗?似乎是你想要的。反应路由器 https://github.com/ReactTraining/react-router

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用react.js 在单页应用程序中导航 的相关文章

  • 使用 Javascript 实现 Tinder 风格的拖放手势?

    我正在尝试找出哪些库可以用于仅使用 Javascript 的 Tinder 风格拖放手势 需要创建一个响应拖动手势的 HTML 元素 触摸并按住时 允许元素跟随用户的手指移动 当用户移开手指时 该元素会 动画回到原来的位置 如果元素在释放时
  • javascript函数知道它的名字吗

    我有一个名为 getItem 的函数 我想使用其中的代码读取该函数的名称 这可能吗 function getItem var functionName how do I read the function name alert functi
  • 整个页面都是玻璃板

    有没有一种简单的方法可以在整个 HTML 页面上拥有一个 玻璃窗格 而不管缩放 幻灯片事件 平台 浏览器 移动 桌面 我所说的 简单 是指纯 CSS 支持 而不是插件 后备 插件建议也可能有用 Thanks 如果您只是指所有内容之上的一层
  • 如何在React-Native中选择ListView的一项?

    我是 React Native 的新手 我想使用 ListView 选择一项 当我第一次按下 item 时 ListView renderRow 被调用 但终究不起作用 我该如何修复这个错误 我的问题出在哪里 我写了一个演示here htt
  • React 重新渲染数组,而 item key 没有改变

    列表的非常基本的代码示例 class List extends React Component render const listComponent this props numbers map number gt
  • 如何使用 Underscore 获取 JavaScript 数组中的重复项

    我有一个数组 我需要重复的项目并根据特定属性打印这些项目 我知道如何使用 underscore js 获取唯一项目 但我需要找到重复项而不是唯一值 var somevalue name john country spain name jan
  • 粉碎一个元素,向随机方向发送碎片

    我试图 粉碎 一个元素 例如 一个图像 并将其碎片朝随机方向飞行 当碎片到达目的地时 即x距离 以像素为单位 它们变成原始图像的较小版本 jQuery UI 的explode http api jqueryui com explode ef
  • 如何使用 console.log 省略文件/行号

    如今 您可以在 Chrome 的控制台中编写非常好的东西 查看this https developer chrome com devtools docs tips and tricks关联 我也做了一个截图 正如您在屏幕截图中看到的那样 文
  • Chart.js - 如何将数组集合推入数据集

    我一直在尝试多种方法将数组集合推送到数据集中 任何人都可以帮助我根据下面的代码将数组推入堆积图表中 这是例子 Codepen 堆叠栏 https codepen io narendrajadhav pen abzpWam JavaScrip
  • 将 javascript 放在 header 之外有多糟糕?

    这个问题几乎已经说明了一切 我开始添加一些功能到我的周末项目 http www my clock net 对于我和几个朋友来说 这是一个小应用程序 因为我们是交换生 所以它对我们来说有点有用 但事情是这样的 我在 php 中执行此操作并使用
  • 按日期对 JSON 进行排序

    我知道这一定相对简单 但我有一个 JSON 数据集 我想按日期排序 到目前为止 我每次都会遇到问题 现在我将日期存储为this lastUpdated 如果有帮助的话 我可以访问 jquery 但我意识到 sort 是本机 JS 提前致谢
  • 对函数而非组件做出延迟加载反应

    我正在开发一个 React v16 应用程序 需要加载一个重型 IMO 库来导出 xlsx 数据 我正在使用功能组件 挂钩 我了解并使用过
  • Backbone.js 应用程序可以逐步增强并可供搜索引擎抓取吗?

    我需要为我的下一个项目实现一个 MVC JavaScript 框架 但它既是一个网站 又是一个 Web 应用程序 是否可以公开数据服务器端 然后解析 URL 以显示 JS 版本 我计划使用 Rails 作为服务器端代码 我写了一个关于这个主
  • jQuery 如何通过不同的列值计算表中的行数

    如何按表列计算不同的表行 Example table thead tr th NAME th th TECHNOLOGY th tr thead tbody tr td john td td jQuery td tr tr td mark
  • javascript 中一次仅选中一个复选框

    I have 3复选框 我只想1一次选中的复选框 下面是我的 html 小提琴 JS小提琴 https jsfiddle net n03jLhqa 我想要这个工作在IE8还请建议如何做 这个怎么样 fiddle http jsfiddle
  • 如何与使用 child_process.spawn 创建的新创建的服务器交互

    我正在尝试为我的私人托管的 反恐精英全球攻势 服务器制作一个前端 当我点击运行服务器时 在前端 一切正常 服务器启动并记录到控制台 但是如何查看服务器IP地址 服务器中的玩家等信息呢 这是我到目前为止运行服务器的内容 router post
  • Modernizr 未将类应用于 html 标签

    我目前正在构建一个网站 我需要使用 Modernizr 但由于某种原因 它没有将类应用到 html 标签 因为它应该 我的代码如下所示
  • 自动更改 Twitter Bootstrap 选项卡

    我希望 Twitter Bootstrap 选项卡按时间顺序更改 我使用它们有点像旋转木马 我希望选项卡每 10 秒切换到下一个选项卡 这是一个例子 http library buffalo edu http library buffalo
  • javascript:获取带有单位的CSS prop值[重复]

    这个问题在这里已经有答案了 我的代码是这样的 image 1 position absolute top 3vw 我的尝试 http jsfiddle net z8k6t3fb 1 http jsfiddle net z8k6t3fb 1
  • 调试客户端时使用 Chrome/Firefox

    我正在使用带有 getUserMedia 的相机 但出现了一些需要修复的错误 问题是 Visual Studio 只允许我使用 IE 调试 JavaScript 我的意思是命中断点 而 IE 不支持 getUserMedia 如果您想在 I

随机推荐

  • 始终显示工具提示(角度材质2)

    我有一些按钮
  • S3 存储桶的基本 AWS IAM 权限

    我正在尝试找出 IAM 用户 密钥的基本权限集 使其只能访问 S3 中的单个存储桶 只能对单个存储桶进行读 写访问 完成这项工作至少需要哪组权限 我在 S3 的 IAM 策略生成器中选择了所有选项 在存储桶上启用了所有权限 除了Create
  • 更改小部件所有实例的 Qt 样式表

    使用 PyQt 是否有任何方法可以更改小部件的每个实例的样式表 而无需手动更改每个小部件的样式表 举例来说 我希望应用程序中的每个按钮都有红色文本 我该如何做到这一点而不需要运行button setStyleSheet 每个按钮 有可能有办
  • 将 BitmapSource 转换为 MemoryStream

    如何将 BitmapSource 转换为 MemoryStream 虽然我尝试了一些代码 private Stream StreamFromBitmapSource BitmapSource writeBmp Stream bmp usin
  • 非阻塞IO是如何实现的?

    在 Java 或 C 或其他一些语言中 存在非阻塞 IO 设施 例如套接字 因此 我可以将回调函数提供给非阻塞 IO 一旦非阻塞 IO 接收到任何内容 它将调用我的回调 我想知道它们是如何实施的 如果我在幕后创建非阻塞 IO Java 或
  • 如何更改 django wagtail 的管理徽标

    我正在做一个小项目 我想我会付出wagtail http wagtail io 尝试一下 我现在想知道如何更改侧边栏中 wagtail 的管理徽标 下图左上图 我可以改变 static wagtailadmin images wagtail
  • 创建一个 MIME 电子邮件模板,其中包含要使用 python / django 发送的图像

    在我的网络应用程序中 我偶尔使用可重用的邮件应用程序发送电子邮件 如下所示 user self user subject My subject from email protected cdn cgi l email protection
  • iOS 通过 AFNetworking 2.0 上传图片

    我一直在寻找新的 AFNetworking 2 0 上传图像的示例 但我碰壁了 无法弄清楚代码出了什么问题 这是我使用的代码 NSData imageData UIImageJPEGRepresentation image 0 5 NSUR
  • PHP 中是否有 JQuery DOM 操作/CSS 选择器等效类?

    我知道我可以使用DOM文档 http us php net manual en class domdocument php and DOMXPath http us php net manual en class domxpath php操
  • RestKit - 离线存储后发送添加/编辑/删除的对象

    将 RestKit 与 Core Data 结合使用 当用户在没有互联网连接的情况下添加 编辑或删除对象时 我通过标记对象并将其与 Core Data 一起保存来提供离线支持 如果互联网再次可用 我将获取所有添加 编辑 删除的对象 将它们保
  • 为餐厅菜单创建点引线

    我正在尝试创建一个带有点领导者的餐厅菜单 但我遇到了麻烦 我正在寻找的格式是下面发布的图片 有人可以帮我解决这个问题吗 HTML div class dotted ol li h2 Test h2 p span Test 2 span sp
  • php如何限制用户每天登录一次以上

    有没有办法限制用户每天登录次数不超过一次 这在 PHP 中可能吗 如果是这样 你能指导我该怎么做吗 在我的数据库中 我有用户名和密码字段以及时间戳 我还应该添加什么 我尝试过这个 但问题是我不希望它受到限制IP并且应该尊重用户
  • 合并两个 xml 文件 LINQ

    我在合并两个 XML 文件时遇到问题 我将这两个文件加载到两个对象中 找到两个对象中的目标节点并尝试合并 这是一个示例 var nodes1 XResult1 Descendants subject var nodes2 XResult2
  • 静态只读字段初始值设定项与静态构造函数初始化

    以下是初始化静态只读字段的两种不同方法 这两种方法有区别吗 如果是 什么时候应该优先选择其中一个 class A private static readonly string connectionString WebConfiguratio
  • JPA。 JoinTable 和两个 JoinColumn

    我需要创建表 PORTATION MODEL SET 我需要从表 portation 创建两个密钥 从表phone model 创建一个密钥 我有代码 Entity Table name PORTATION SecondaryTable n
  • 为什么 Android Lint 在显式使用 Locale.US 时会警告 String.format 使用默认区域设置?

    我最初打电话String format这边走 return String format s f f anotherString doubleA doubleB 这使得 Android Lint 生成此警告 隐式使用默认区域设置是错误的常见来
  • 在 MongoDB 中,如何索引数组中的嵌入对象字段?

    多键的 mongodb 文档给出了查询数组中嵌入对象字段的示例 http www mongodb org display DOCS Multikeys http www mongodb org display DOCS Multikeys
  • 可垂直滚动的 GroupBox

    我正在使用创建一个应用程序Windows 申请表 我基本上是 C 和 Visual Studio 的新手 从昨天开始就一直在使用它 到目前为止 我已经成功创建了一个简单的表单 如屏幕截图所示 My Form 背景 细节 我正在使用框中提供的
  • 通过NotificationListenerService读取Google地图通知

    是否可以读取用户移动时定期显示的 Google 地图导航通知 例如 定期更新距下一回合的剩余距离 我尝试使用NotificationListenerService来实现此目的 但是当我尝试使用getNotifications getExtr
  • 使用react.js 在单页应用程序中导航

    我正在使用 React 和 Backbone 构建一个单页面应用程序 并试图找出处理应用程序中内容之间导航的最佳实践 我的应用程序将有一个侧边栏 其中包含链接 例如 照片 和 设置 侧边栏始终存在 因此单击 设置 后 我希望在不重新加载整个