jjzjj

javascript - Root Navlink 始终获得事件类 React Router Dom

coder 2024-07-26 原文

我正在使用 react-router-dom: 4.2.2。我可以将 activeClassName 添加到当前 URL。但令人惊讶的是，该类总是添加到根 URL。

在访问一个页面时，例如如下图所示的错误页面，主页导航链接也获得了 activeClass。

更新:在上面的屏幕截图中，我显示我访问了 http://localhost:3000/#/error。因此，active-link 应该只添加到 Love Error? NavLink。但如您所见，它也被添加到 Home NavLink。

这是我的导航栏代码:

import React from 'react';
import { NavLink } from 'react-router-dom';

export const NavigationBar = () => (
  <ul className="horizontal-menu">
    <li> <NavLink to = '/' activeClassName="active-link">Home</NavLink> </li>
    <li> <NavLink to = '/about' activeClassName="active-link">About Us</NavLink> </li>
    <li> <NavLink to = '/error' activeClassName="active-link">Love Error?</NavLink> </li>
  </ul>
)

对于路由，我使用了以下交换机:

<Switch>
  <Route exact path = '/' component = {Home} />
  <Route exact path = '/about' component = {AboutUs} />
  <Route exact path = '/error' component = {Error404} />
  <Route path = "/news/:id" component = {NewsDetail} />
  <Route path="*" component={Error404} />
</Switch>

如何获得预期的行为？

最佳答案

您必须使用 isActive={} 添加额外的验证以确保链接是否处于事件状态。

document

工作 jsFiddle . ( fiddle 不是我创造的)

你需要添加的代码如下

jsfiddle 中的例子

<li><NavLink to="/" isActive={checkActive}>Home</NavLink></li>

更改代码

<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>

检查 isActive 属性，“checkActive”是一个函数。

const checkActive = (match, location) => {
    //some additional logic to verify you are in the home URI
    if(!location) return false;
    const {pathname} = location;
    console.log(pathname);
    return pathname === "/";
}

您可以使用的另一个配置是“exact”，但无法在 jsFiddle 中对其进行演示。 我认为代码会像 

<li> <NavLink exact to='/' activeClassName="active-link">Home</NavLink> </li>

希望这对您有所帮助。如果您需要更多信息，请告诉我。

关于javascript - Root Navlink 始终获得事件类 React Router Dom，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47879663/

javascriptNavlinkcodegtreactjsreact-router-dom

有关javascript - Root Navlink 始终获得事件类 React Router Dom的更多相关文章

  1. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类

  2. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  3. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

  6. ruby-on-rails - 在不重新查询数据库的情况下重新排序 Rails 中的事件记录？ - 2

    例如，假设我有一个名为Products的模型，并且在ProductsController中，我有以下代码用于product_listView以显示已排序的产品。@products=Product.order(params[:order_by])让我们想象一下，在product_listView中，用户可以使用下拉菜单按价格、评级、重量等进行排序。数据库中的产品不会经常更改。我很难理解的是，每次用户选择新的order_by过滤器时，rails是否必须查询，或者rails是否能够以某种方式缓存事件记录以在服务器端重新排序？有没有一种方法可以编写它，以便在用户排序时rails不会重新查询结果

  7. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  8. ruby-on-rails - 使用 Rails 事件记录获取二级模型 - 2

    我有一个帖子属于城市的关系，城市又属于一个州，例如:classPost现在我想找到所有帖子及其所属的城市和州。我编写了以下查询来获取带有城市的帖子，但不知道如何在同一查找器中获取带有城市的相应州:@post=Post.find:all,:include=>[:city]感谢任何帮助。谢谢。 最佳答案 Post.all(:include=>{:city=>:state}) 关于ruby-on-rails-使用Rails事件记录获取二级模型，我们在StackOverflow上找到一个类似的问

  9. ruby - 我可以从 Ruby 中的系统调用中获得连续输出吗？ - 2

    当您在Ruby脚本中使用系统调用时，您可以像这样获得该命令的输出:output=`ls`putsoutput这就是thisquestion是关于。但是有没有办法显示系统调用的连续输出？例如，如果您运行此安全复制命令，以通过SSH从服务器获取文件:scpuser@someserver:remoteFile/some/local/folder/...它显示随着下载进度的连续输出。但是这个:output=`scpuser@someserver:remoteFile/some/local/folder/`putsoutput...不捕获该输出。如何从我的Ruby脚本中显示正在进行的下载进度？

  10. ruby - 在没有数据库的情况下伪造一个事件记录模型 - 2

    我觉得我错过了什么。我正在编写一个ruby​​gem，它允许与事件记录进行交互，作为其主要功能的附加功能。在为其编写测试用例时，我需要能够指定虚拟事件记录模型来测试此功能。如果我可以获得一个事件记录模型的实例，它不需要与数据库的任何连接，可以有关系，所有这些东西，但不需要我在数据库中设置表，那就太棒了。我对测试还很陌生，在Rails测试之外我也很陌生，但似乎我应该能够相当轻松地完成类似的事情，但我什么也没找到。谁能告诉我我错过了什么？我看过工厂、制造商、固定装置，所有这些似乎都想达到目标。人们如何在您只需要AR对象进行测试的地方测试gem？ 最佳答案

随机推荐