问题描述
我正在尝试使用React-Router(v4),我在Nav开始时遇到问题,让其中一个 Link
为活性
。如果我点击任何 Link
标签,那么活动内容就会开始工作。但是,我希望Home Link
在应用程序启动时立即生效,因为这是在 / 路线。有没有办法做到这一点?
I'm trying out React-Router (v4) and I'm having issues starting off the Nav to have one of the
Link
's be active
. If I click on any of the Link
tags, then the active stuff starts working. However, I'd like for Home Link
to be active as soon as the app starts since that is the component that loads at the /
route. Is there any way to do this?
这是我目前的代码:
const Router = () => (
<BrowserRouter>
<div>
<Nav>
<Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */}
<Link activeClassName='is-active' to='/about'>About</Link>
</Nav>
<Match pattern='/' exactly component={Home} />
<Match pattern='/about' exactly component={About} />
<Miss component={NoMatch} />
</div>
</BrowserRouter>
)
推荐答案
< Link>
不再有 activeClassName
或 activeStyle
属性。在react-router v4中,您必须使用如果你想做条件样式:
<Link>
no longer has the activeClassName
or activeStyle
properties. In react-router v4 you have to use <NavLink>
if you want to do conditional styling:
const Router = () => (
<BrowserRouter>
<div>
<Nav>
<NavLink exact={true} activeClassName='is-active' to='/'>Home</NavLink>
<NavLink activeClassName='is-active' to='/about'>About</NavLink>
</Nav>
<Match pattern='/' exactly component={Home} />
<Match pattern='/about' exactly component={About} />
<Miss component={NoMatch} />
</div>
</BrowserRouter>
)
我在家里添加了一个确切的属性
< NavLink>
,我很确定如果没有它,主页链接将始终处于活动状态,因为 /
将匹配 / about
以及您拥有的任何其他页面。
I added an exact property to the home
<NavLink>
, I'm fairly sure that without it, the home link would always be active since /
would match /about
and any other pages you have.
这篇关于与React-Router的活动链接?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!