Highlight default link in react router v4

Question

I'm creating a simple sidebar for when someone visits a root directory of site.com/,

Test
Test2

When I click on either, it loads their components on the side and the link becomes highlighted.

for now I'm using a Route for / to load the Test Component by default.

my question is, how do I get the Test link highlighted by default when one goes to /?

<Router>
    <section>
      <nav>
        <NavLink to="/test" activeClassName="active">Test</NavLink>
        <NavLink to="/test2" activeClassName="active">Test2</NavLink>
      </nav>
      <aside>
        <Switch>
          <Route exact path="/" component={Test} />
          <Route path="/test" exact={true} component={Test} />
          <Route path="/test2" exact={true} component={Test2} />   
        </Switch>
      </aside>
    </section>
</Router>

is there another way of setting the default component?

linked - https://stackoverflow.com/q/29552601/104380 – vsync Apr 30 '20 at 12:44 — vsync, Apr 30 '20 at 12:44

score 4 · Accepted Answer · answered Apr 14 '18 at 17:14

Since both the component rendered at / and /test are same, you could simply redirect from / to /test in which case your NavLink will highlight correctly

<Router>
    <section>
      <nav>
        <NavLink to="/test" activeClassName="active">Test</NavLink>
        <NavLink to="/test2" activeClassName="active">Test2</NavLink>
      </nav>
      <aside>
        <Switch>
          <Redirect exact from="/" to="/test" component={Test} />
          <Route path="/test" exact={true} component={Test} />
          <Route path="/test2" exact={true} component={Test2} />   
        </Switch>
      </aside>
    </section>
</Router>

Highlight default link in react router v4

1 Answers1