具有不同内容的跨路由的通用组件

2023-12-09

我有一个名为Header它存在于所有路线中,而应用程序的其余部分则发生变化。为了实现这一点,我的主要渲染代码如下所示(使用 ES6):

render(){
  return (
    <div>
      <Header></Header>
      <Router>
        <Route path="/" component={Home} />
        <Route path="/details/:id" component={Details} />
      </Router>
    </div>
  );
}

挑战在于,<Header>应根据路线略有不同,例如每条路线都有一个唯一的标题。

如何才能实现这一目标?


感谢所有精彩的答案!还在琢磨它们。

为了混合另一个解决方案,我发现我实际上可以在Route,所以我添加了title:

<Route title="My Title" component={App} />

我重新调整了我的路由层次结构以将标头包含在Router(在顶层Route组件而不是像以前一样在任何路径之外),所以我的主要渲染代码如下所示:

<Router>
  <Route component={App}>
    <Route path="/" component={Home} title="Home" />
    <Route path="/detail/:id" component={Detail} title="Details" />
  </Route>
</Router>

And my App包含标题并传递当前路由的标题:

class App extends React.Component {
  render(){
    var route = this.props.routes[this.props.routes.length - 1];
    return (
      <div>
        <Header title={route.title} />
        {this.props.children}
      </div>
    )
  }
}

但我不能说这是最好的解决方案。我确实喜欢这样,我可以把title现在在每条路线上,但我担心耦合以及我必须从routes array.

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

具有不同内容的跨路由的通用组件 的相关文章

随机推荐

  • 契约优先的 SOA:设计业务领域:WCF

    我正在使用 WCF 构建一个全新的系统 我将使用契约优先方法来构建基于面向服务的概念的服务 我有一项服务操作 可返回用户的银行帐户详细信息 账户类型可以是 FixedAccount 或 SavingsAccount 我将服务设计如下 Ser
  • 如何在 Flask 应用程序中创建动态子域

    我正在尝试在 Flask 应用程序中设置变量路由处理 如本答案中所述 Web 应用程序中的动态子域处理 Flask 然而 我希望能够在某些子域被变量路由捕获之前识别它们 这样我就可以使用flask restful api扩展 使用 REST
  • PHP PDO 事务回滚不起作用

    一切还好吧请有人帮助我吗我正在尝试使用 PHP PDO 事务 但我遇到了一个问题 但我无法处理它 rollBack 函数在捕获异常时不起作用这是连接代码 host localhost user root pass error dbname
  • r闪亮:从另一个rhandsontable更新rhandsontable

    我希望你很好 我正在尝试创建一个闪亮的仪表板 用户可以通过该仪表板从一个rhandsontable 更新另一个rhandsontable 我的代码如下 library shiny library rhandsontable channel
  • 使用 config.filter_parameters 对 Rails 3 中的参数进行自定义过滤

    我正在努力从 Rails 2 3 11 升级到 3 0 10 并且在转换中的内容时遇到问题ApplicationController s filter parameter logging 我想过滤某些参数 如果它们出现在类似 a 的值中 也
  • 我的 iPad 运行时内存去哪儿了?

    我导致设备 iPad 明显耗尽内存 所以它放弃了我的应用程序 我试图了解发生了什么 因为 Instruments 告诉我我正在使用大约 80Mb 并且设备上没有运行其他应用程序 我找到了这个代码片段来向 iOS 下的 Mach 系统询问内存
  • 保存Word文档

    我想根据Word安装的版本保存Word文档 如果是Word 2003 适当的版本号是11 则DOC扩大 如果Word版本高于2003 则DOCX扩大 差异反映在发送到的第二个参数中SaveAS方法 object fileFormat Gra
  • 位运算的实际应用[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心以获得指导 你用位运算来做什么 为什么
  • 检查字符串是否作为其自己的单词出现 - Python

    假设我正在寻找这个词 or 我想要的是检查该单词是否显示为一个单词或另一个单词的子字符串 E g 输入 或 输出 真 输入 对于 输出 假 我想我可以检查前后的字符是否是字母 但是有没有更有效 更简单的方法来做到这一点 谢谢 Edit此外
  • Bootstrap 4:显示两行,后跟“阅读更多”可展开链接

    我正在关注this令人惊奇的指南显示两行文本 并为用户提供 阅读更多 的链接 转换未按预期进行 有人可以指出我在这里做错了什么吗 module font size 1rem line height 1 5 module p collapse
  • Spidermonkey 中的 JSON 序列化

    我在用着python spidermonkey运行 JavaScript 代码 为了将对象 而不仅仅是字符串 传递给 Python 我正在考虑返回 JSON 字符串 这似乎是一个常见问题 所以我想知道 Spidermonkey 或 Spid
  • 将actionListener添加到jCalendar

    如何将 actionListener 添加到使用 netbeans 放置的现有 jCalendar 的 jDayChooser 组件 我只想仅在单击日期按钮时触发事件 因为 jCalendar 中的 propertyChange 甚至会监听
  • Android 不同分辨率的布局

    我希望为各种屏幕分辨率创建各种布局 例如hdpi xhdpi etc 我读了here关于我怎样才能做到这一点 所以我创建了两个目录layout xlarge and layout large in my res目录并放置xml那里的布局 我
  • 受密码保护的 UITextField 上的大写锁定图像

    我正在创建一个需要使用 USB 键盘的应用程序 普通触摸屏键盘已被禁用 不会显示 当用户第一次安装该应用程序时 他们需要创建一个四位数的 Pin 图 Pin 的输入字段受密码保护 每次输入新数字时都会出现点 Pin UITextField
  • 每周/每月查询的 SQL 请求,即使不存在记录

    我正在使用 MySQL 我很难获得每月的计数 包括没有记录的月份 这是我的表 Plays idplay idplayer day 1 26 17 11 2015 2 37 22 12 2015 3 65 24 04 2016 4 12 16
  • 在 PHP 中调整图像大小的智能方法[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心以获得指导 我想知道是否有人可以帮助我
  • 有这样的RTSP Ping吗?

    我目前正在开发一个 WinForm 应用程序 使用 C 中的 RTSP 协议从 IP 摄像机流式传输视频 一切都很好 该应用程序的部分要求包括检查网络摄像机是否在线的功能 因此 我使用 System Net NetworkInformati
  • 《Head First Design Patterns》一书中的接口与接口关联

    这本书首先设计模式将以下 UML 作为观察者模式的示例 这张图中让我印象深刻的是之间的关联关系Subject and Observer接口 据我了解Java接口 它们不能以这种方式实现 Has a 关系 当我查看几页后提供的实现示例时 我发
  • 如何在Python中对嵌套列表的外部和内部子列表进行排序?

    首先 如果这太天真 我深表歉意 我是初学者 我有以下类型的列表列表 我想首先按内部列表的最后一个成员按升序排序 data 1 45 0 2 49 2 3 98 0 4 82 1 5 77 1 6 98 2 我通过使用以下方法来实现此目的 s
  • 具有不同内容的跨路由的通用组件

    我有一个名为Header它存在于所有路线中 而应用程序的其余部分则发生变化 为了实现这一点 我的主要渲染代码如下所示 使用 ES6 render return div div