React Bootstrap change link of Navbar to active

user_13861269 0
Viewed 13634

I use a Navbar as a component on page, which uses Router to change the content. Everything is working fine, so far. But I can´t figure out, how I can set the state of the links in the Navbar to active, when they are clicked. I think, I have to bind the activeKey of the Nav element to the location.pathname of the active content.

This is my Navbar component:

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

class Navbar extends React.Component{

    constructor() {
        super();
        this.state = {
          show: false
        };
      }

    render(){
        return(
            <div>
                <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
                    <Navbar.Brand >Filmmusic</Navbar.Brand>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav activeKey="/" className="mr-auto">
                        <Nav.Link href="/">Home</Nav.Link>
                        <Nav.Link href="/about">About</Nav.Link>
                        <Nav.Link onClick = {()=>{this.handleModal()}}>Contact</Nav.Link>
                    </Nav>
                    <Nav>
                        <Nav.Link href="/impressum">Impressum</Nav.Link>
                        <Nav.Link href="/datenschutzerklaerung">Datenschutzerklärung</Nav.Link>
                    </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </div>
        )
    }
    
}

export default Navbar;
navbar reactjs hyperlink
4 Answers

Thanks a lot! Everything is working fine now :) I wrote the Navbar code into the index.js, instead of using a component. And I put all components below the Router element. Here is the final code of my index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import { Home } from './components/Home';
import { About } from './components/About';
import { Contact } from './components/Contact';
import { NoMatch } from './components/NoMatch';
import { Impressum } from './components/Impressum';
import { Datenschutzerklaerung } from './components/Datenschutzerklaerung';
import { Layout } from './components/Layout';
import { Jumbotron } from './components/Jumbotron';
import Footer from './components/Footer';
import './fontawesome';
import { Navbar, Nav } from "react-bootstrap";
import { withRouter } from "react-router";

const Header = props => {
  const { location } = props;
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Navbar.Brand >Filmmusic</Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
      <Nav activeKey={location.pathname} className="mr-auto">
          <Nav.Link href="/">Home</Nav.Link>
          <Nav.Link href="/about">About</Nav.Link>
          <Nav.Link href="/contact">Contact</Nav.Link>
      </Nav>
      <Nav activeKey={location.pathname}>
          <Nav.Link href="/impressum">Impressum</Nav.Link>
          <Nav.Link href="/datenschutzerklaerung">Datenschutzerklärung</Nav.Link>
      </Nav>
      </Navbar.Collapse>
  </Navbar>
  );
};
const HeaderWithRouter = withRouter(Header);

class MyHeader extends React.Component {

  render() {
    return (
      <React.Fragment>
        <Router>
        <HeaderWithRouter />
        <Jumbotron />
          <Switch>
            <Route exact path="/" component={Home} />
            <Layout>
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
              <Route path="/impressum" component={Impressum} />
              <Route path="/datenschutzerklaerung" component={Datenschutzerklaerung} />
            </Layout>
            <Route component={NoMatch} />
          </Switch>
        </Router>
        <Footer />
      </React.Fragment>
    );
  }
}

ReactDOM.render(<MyHeader />, document.getElementById('root'));
user_138612690

You have to wrap your NavBar component with withRouter HOC. Then you can make these changes:

render(){
    const { location } = props;  //add this
    return(
        <div>
            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
                <Navbar.Brand >Filmmusic</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                <Nav activeKey={location.pathname} className="mr-auto"> //Update this
                    <Nav.Link href="/">Home</Nav.Link>
                    <Nav.Link href="/about">About</Nav.Link>
                    <Nav.Link onClick = {()=>{this.handleModal()}}>Contact</Nav.Link>
                    <Nav.Link href="/impressum">Impressum</Nav.Link>
                    <Nav.Link href="/datenschutzerklaerung">Datenschutzerklärung</Nav.Link>
                </Nav>
                </Navbar.Collapse>
            </Navbar>
        </div>
    )
}

More details about withRouter HOC.

user_121758010

If you don't want to use the router and need more flexibility in your state change, you can also use the useState hook:

export const Nav = () => {
  const [active, setActive] = useState('default');
  return (
    <>
      <Nav
        className="sub-nav"
        activeKey={active}
        onSelect={(selectedKey) => setActive(selectedKey)}
      >
        <Nav.Item>
          <Nav.Link eventKey="default">Default</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1">Link 1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-2">Link 2</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="disabled" disabled>
            Disabled
          </Nav.Link>
        </Nav.Item>
      </Nav>
    </>
  );
};
user_10705230

withRouter is deprecated since react-router v5.1

So you can just use location hook.

const location = useLocation();
  ...
    <Nav activeKey={location.pathname} className="mr-auto">
  ...
user_155828590
Related