对于React路由器DOM中的多个URL，同一链路上的NavLink处于活动状态

文章/答案/技术大牛

发布

1回答

reactjs、react-router、react-router-dom

我有一个包含多个选项卡的页面(子级)。我还更改了每个选项卡的URL，但我仍然在父页面上，只是更改了选项卡的URL。问题是，当我点击标签时，我不能保持父页面NavLink的活动状态，因为它改变了URL，但是我想在Tabs URL上保持活动状态。该怎么做呢？从React导入react；从react</em

浏览 5提问于2020-06-06得票数 2

回答已采纳

4回答

React路由器(v4) Navbar

reactjs、react-router、materialize

I使用的是反应性路由器-dom的v4 我需要访问nav组件中的this.props.match，以便设置活动类。我用的是反应物化。在<NavItem>标记中，我想添加className={this.props.match ? 'active' : ''}。然而，我似乎无法进入比赛。每次在控制台中打印道具时，道具都是一个空对象。PropsRoute component={NotFoun

浏览 9提问于2017-06-15得票数 10

回答已采纳

2回答

导航链接仍然是活跃的变化反应-路由器-多姆

reactjs、react-router-dom

我有两个导航按钮，使用的标签-路由器-多姆。我面临的问题是，当我从第一个按钮切换到第二个按钮时，第一个按钮仍然处于活动状态。在我的情况下，我有一个runs按钮和一个input按钮-- runs按钮处于活动状态，但是当单击input按钮时，run按钮仍然处于活动状态。下面是我的代码片段，显示导航选项卡:从“react router

浏览 3提问于2020-08-10得票数 0

回答已采纳

2回答

React路由器<Link>没有活动类。

react-router

我希望我的<Link>在与它们的路线匹配时有一个active类。当前，即使在链接引用的路由上，结果的<a>标记也不会改变。我的链接创建如下：<Link to="/status">STATUS</Link> <Router> <PS:我在使用redux路由器

浏览 3提问于2016-02-02得票数 1

回答已采纳

4回答

使用反应性路由器当前路由在菜单上有条件地设置活动类

reactjs、react-routing

我使用的是react路由器1.0.2，我的路由如下所示： <Provider store={store}>import React, {Component} from 'react'; import Menu from '.location: this.props.locatio

浏览 4提问于2015-12-22得票数 14

回答已采纳

2回答

使用ReactJs中的react路由器获取一个活动路由

javascript、reactjs、react-router、react-router-v4

我正在使用reactjs.In创建一个项目--我的应用程序--我正在使用以下方法获得活动路由：但越来越不明确，我使用的反应路由器4。更早，这是为我工作时，我使用较低版本的反应-路由器。这是我的代码： console.log( this.context.

浏览 8提问于2017-12-07得票数 16

5回答

更改Reactjs中活动导航项的颜色

javascript、css、reactjs、react-router

我想要改变导航条文本的颜色取决于我正在浏览的页面。 import React from "react"; const

浏览 1提问于2021-08-03得票数 0

回答已采纳

2回答

如何使用NavLink* -NavLink-*dom将路由器设置为活动状态

javascript、reactjs、react-router

我正在使用react-router-dom，当url匹配时，我需要使red成为一个链接，在我的up中，我有两个url，/ => home和/map。使用当前代码，我可以路由到不同的页面，但当浏览器中的url更改时，NavLink不会突出显示。有没有办法解决这个问题。import React from 'react' i

浏览 1提问于2017-09-06得票数 3

回答已采纳

5回答

与React-Router的活动链路？

javascript、reactjs、ecmascript-6、react-router

我正在尝试使用React-Router (v4)，但在启动Link时遇到了一些问题。如果我点击任何一个Link标签，active Link就会开始工作。但是，我希望应用程序一启动，家庭/就会激活，因为它是在/路径上加载的组件。有没有办法做到这一点？下面是我当前的代码： <BrowserRouter> <Nav> <Link activeClassName

浏览 2提问于2016-12-14得票数 106

回答已采纳

3回答

如何使用React在点击时动态添加和删除类？

javascript、reactjs、button、classname

同时，我想删除除我点击的链接之外的所有现有的“is-active”。类"is-active“可能只有一个元素，因为这将是”活动“页面。(使用bulma css) )} } 我会非常感谢你的建议

浏览 1提问于2019-02-25得票数 3

回答已采纳

2回答

如果url等于某个字符串，那么如何做一些事情呢？

javascript、reactjs

element.classList.remove('NavBar_active__Cvluy') }); 这是我的代码，但需要双击才能识别当前的url。

浏览 3提问于2022-08-05得票数 0

4回答

react路由器索引路由始终处于活动状态

javascript、reactjs、react-router

我试图通过使用react activeClassName属性来调整导航的样式。到目前为止，它按照预期工作，但是有一个问题--我的第一个导航链接指向根路由(/)。因此，即使在另一个URL上，它也会将该URL (例如，/skills)和根注册为active (所以2个菜单项被样式化)。import React, { PropTypes } from 'react'

浏览 5提问于2016-08-28得票数 16

回答已采纳

2回答

如何让NavLink观察区分大小写

reactjs、react-router、react-router-v4

我想知道如何修复此代码以允许NavLink观察大小写敏感度。我已经向Route组件添加了敏感的道具，但没有用。我在这里看到的是，当我只想让单击的项目使用样式时，单击first或second都会导致为这两个链接启用活动链接样式。谢谢。import * as React from "react";import { Browse

浏览 0提问于2019-07-31得票数 0

6回答

react路由器中的activeClassName同时突出显示两个NavLinks

css、reactjs、react-router、router

我正在学习React路由器，并遵循，一切都很清楚，并且按照指示工作(谢谢作者)，除了一个突出显示active NavLink的问题之外。="current" to='/contact'>Contact</NavLink></li> </nav> 注意主页链接是如何与活动白线保持在一起的，尽管它不再是<em

浏览 1提问于2018-10-26得票数 8

回答已采纳

1回答

react-路由器<Link/>通配符路径匹配

reactjs、react-router

在我的应用程序中，我有一个带有几个链接的<NavBar/>组件，这些链接告诉后端返回一个处于指定状态的随机location_id。这可以很好地工作，但是因为我使用返回的location_id路径browserHistory.replace() random路径，所以<NavLink/>不再与路由器路径匹配，因此不会保留为active有没有办法使<Link/>组件与包括r

浏览 8提问于2016-08-03得票数 0

回答已采纳

1回答

React路由器使子路由的链路处于非活动状态

javascript、react-router

我有一个react路由器应用程序，它有这样一个简单的导航： {className: 'navigation'}, {}, Link, {to: '/he

浏览 17提问于2017-02-20得票数 0

回答已采纳

7回答

React路由器v4 <NavLink>与<Link>利益

javascript、reactjs、react-router、react-router-v4

除了在activeClassName上设置"activeStyle“和”NavLink“之外，在非导航元素上创建到其他路由的链接时，是否有理由在链接上使用NavLink。在您的站点上不需要活动状态/类的主导航(在页眉或页脚)？

浏览 15提问于2017-11-16得票数 133

回答已采纳

1回答

我在使用'react-router-dom‘设置我的路由时遇到问题。问题是，如果我使用NavLink类，a标记丢失了，bootstrap不会显示css行为。我想要的是找到一种方法，让类像一个普通的标签一样工作。即使我有btn btn-outline-primary，拥有NavLink也会干扰css属性。 *edit:我发现了问题。如果我为测试目的to="/“设置了所有路由，那么每条链路都将处于活动

浏览 16提问于2019-06-01得票数 0

2回答

保持材料UI选项卡和响应路由器同步

reactjs、react-router、material-ui

是否有一种非恶意的方式来保持材料UI标签和响应路由器同步？基本上，当用户单击选项卡1时，我想要更改URL，当用户使用非选项卡链接或按钮导航到不同的页面时，选项卡应该会自动更改，当然，在直接访问2和页面刷新时也是如此。另外，拥有react路由器的非精确特性也是很好的，因此/foo选项卡对于/foo和/foo/bar/1都应该是活动的。 1其他这样<em

浏览 3提问于2017-05-12得票数 4

回答已采纳

1回答

我有一个问题的反应路由器-多玛，NoMatch不接受URL像/foo/bar

reactjs、url、react-redux、react-router-dom、no-match

我正在使用一个典型的配置与React，Redux和React路由器-dom。在开发中，一切都很好。以及生产模式(本地主机和生产服务器)。我只是对NoMatch流程有一个问题。/好路，这是工作它显示了一个白色页面(404状态在网络控制台中有错误的url www.myWebsite.com/ white /path)我使用<e

浏览 1提问于2019-06-30得票数 0

点击加载更多