javascript Root Navlink 始终获得活动类 React Router Dom
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47879663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Root Navlink always get active class React Router Dom
提问by arsho
I am using react-router-dom: 4.2.2. I can add activeClassNameto the current URL. But surprisingly the class is always added to root URL.
我正在使用react-router-dom: 4.2.2. 我可以添加activeClassName到当前 URL。但令人惊讶的是，该类总是添加到根 URL 中。
While visiting a page, for example the error page like the screenshot below, the home navlink also getting the activeClass.
在访问页面时，例如像下面截图的错误页面，主页导航链接也获取了 activeClass。
Update:In the above screenshot I have showed that I visited http://localhost:3000/#/error. So, the active-linkshould be added to the Love Error?NavLink only. But as you can see it is also added to HomeNavLink too.
更新：在上面的屏幕截图中，我已经表明我访问了http://localhost:3000/#/error. 所以，active-link应该只添加到Love Error?NavLink。但正如您所看到的，它也被添加到HomeNavLink 中。
Here is my navbar code:
这是我的导航栏代码：
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>
)
For routing I have used the following Switch:
对于路由，我使用了以下交换机：
<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>
How can I get the expected behavior?
我怎样才能得到预期的行为？
回答by Shashith Darshana
You have to use isActive={}to add additional verification to ensure whether the link is active.
您必须使用isActive={}添加额外的验证来确保链接是否处于活动状态。
Working jsFiddle. (fiddle is not created by me)
工作jsFiddle。（小提琴不是我创造的）
Code you need to add is like below
您需要添加的代码如下
Example in jsfiddle
jsfiddle 中的示例
<li><NavLink to="/" isActive={checkActive}>Home</NavLink></li>
Change in your code
更改您的代码
<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>
check the isActive prop and "checkActive" is a function.
检查 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 === "/";
}
Another config you can use is "exact" but It is not possible to demonstrate it in a jsFiddle. I think the code would be like
您可以使用的另一个配置是“精确”，但无法在 jsFiddle 中演示它。我认为代码会像
<li> <NavLink exact to='/' activeClassName="active-link">Home</NavLink> </li>
Hope this helps. And let me know if you need more info.
希望这可以帮助。如果您需要更多信息，请告诉我。
回答by digitalh2o
I've found that adding exactbefore the first activeClassNameworks as well. So for example, your set up can be:
我发现exact在第一个之前添加activeClassName也有效。例如，您的设置可以是：
export const NavigationBar = () => (
<ul className="horizontal-menu">
<li><NavLink to='/' exact activeClassName="active-link">Home</NavLink>
</li>
....remaining NavLinks
</ul>
)
回答by fool-dev
You can use exactkeyword for active class such as
您可以将exact关键字用于活动类，例如
<NavLink exact to ='/'>Home</NavLink>
it will generate like that
它会像那样生成
<a href="/" class="active" aria-current="page">Home</a>
and if you will get another page then it will be like that
如果你会得到另一个页面，那就是这样
<a href="/">Home</a>
回答by Jango17
I recently came across this issue and solved it by simply adding:
我最近遇到了这个问题并通过简单地添加解决了它：
import { withRouter } from 'react-router-dom';
and then wrapped the component with:
然后用以下方法包裹组件：
export default withRouter(Component);
回答by kamalesh biswas
Change in your code
更改您的代码
<li> <NavLink to='/' activeClassName="active-link" isActive={checkActive}>Home</NavLink> </li>
and then
接着
const checkActive = (match, location) => {
console.log(location);
if (!location) return false;
const { pathname } = location;
const { url } = match;
return pathname === url ? true : false;
};
- note *
- 笔记 *
const { pathname } = location; const { url } = match; return pathname === url ? true : false;
const { pathname } = location; const { url } = match; return pathname === url ? true : false;
回答by Aravindh S N R
I am learning React now and just came across the same problem. I tried the following and it worked for me.
我现在正在学习 React，刚刚遇到了同样的问题。我尝试了以下方法，它对我有用。
So, I have 3 navigational links.
所以，我有 3 个导航链接。
<li><NavLink to="/home">Home</NavLink></li>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>
But I added 4 routes.
但我添加了 4 条路线。
<Route exact path="/" component={Home}></Route>
<Route path="/home" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/contact" component={Contact}></Route>
I added 2 routes (/ and /home) for the same component (Home). This way, the react-router-dom seems to add the class 'active' only to the link that you click.
我为同一个组件（Home）添加了 2 条路由（/ 和 /home）。这样，react-router-dom 似乎只将“active”类添加到您单击的链接中。
