CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
Thimma
Thimma

Reputation: 1492

My React Router <Link to> is activating multiple links

I'm working on a website, and as a relatively new React developer I ran into a problem regarding router links

I've tried multiple things with Exact routing, hrefs (not my preferred way), I googled a lot and did some other things which I do not remember.

So, this is the button code

<Link to={"/cases/" + ConvertToPageUrl(_project.title)}>
  <p className="portfolio-item__icon mx-auto text-white m-0 mt-3">
    <FontAwesomeIcon icon={faExpandArrowsAlt} />
  </p>
</Link>

And these are the routes

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/wiezijnwij" component={WieZijnWij} />
  <Route path="/diensten" component={Diensten} />
  <Route exact path="/cases" component={Cases} />
  <Route path="/cases/:case" component={Case} />
  <Route path="/contact" component={Contact} />
  <Route component={NotFound} />
</Switch>

At last, this is the navbar

<Nav className="ml-auto">
  {nlRouting.map((route, index) => {
    return (
      <LinkContainer to={route.dest} exact={route.exact} key={index}>
        <Nav.Link eventKey={index}>{route.text}</Nav.Link>
      </LinkContainer>
    );
  })}
</Nav>

nlRouting is a map of all the routes

And this is what happens: Result

I expect only the navlink Cases to activate, instead of the page it came from aswell.

Upvotes: 1

Views: 1302

Answers (1)

Thimma
Thimma

Reputation: 1492

I found it out, the nav links weren't updating. I fixed it by adding

active={false}

to each Nav.Link, which causes it to update.

Upvotes: 1

Related Questions