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?
Here is my current code:
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>
)