Twitter Bootstrap Question posted in

How to check if the route is active?-Twitter bootstrap

I want different color on my nav when its in my homepage. How to check if the homepage route is active, than i want to give different styles on my navbar ? (if else statement). I’ve tried to use window.location.href. It works, but i have to refresh my page first.

$(function() {
  if (window.location.href.indexOf("/") > -1) {
			$('nav').addClass('nav-scroll');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<Navbar default collapseOnSelect fixedTop>
				<Nav pullRight>
					<Navbar.Brand>
						<Link to="/">WakafKita</Link>
					</Navbar.Brand>
					<Navbar.Toggle />
				</Nav>
				<Navbar.Collapse>
					<Nav pullLeft>
						<NavItem eventKey={1} componentClass={Link} href="/" to="/">
							Beranda
						</NavItem>
						<NavItem eventKey={2} componentClass={Link} to="/menu">
							Menu
						</NavItem>
						<NavItem eventKey={3} componentClass={Link} to="/menu">
							Menu
						</NavItem>
						<NavDropdown eventKey={4} title="Akun" id="basic-nav-dropdown">
							<MenuItem eventKey={4.1} componentClass={Link} href="/masuk" to="/masuk">Masuk</MenuItem>
							<MenuItem eventKey={4.1} componentClass={Link} href="/daftar" to="/daftar">Daftar</MenuItem>
						</NavDropdown>
					</Nav>
					<Navbar.Form className="navInput">
						<form>
							<FormGroup>
								<InputGroup>
									<InputGroup.Addon className="nbg">
										<Glyphicon glyph="search" />
									</InputGroup.Addon>
									<FormControl type="text" placeholder="Cari Judul, Nama, atau Campaign" />
								</InputGroup>
							</FormGroup>
						</form>
					</Navbar.Form>
				</Navbar.Collapse>
			</Navbar>
Tags:

2

Answers


  1. 0

    If you are using react router version4, then you must be getting history as props and you can check the active route with the help of:

     history.pathname

    Or else you can go javascript way

     window.location
    Login or Signup to reply.
  2. 0

    If you are using react-router4 you should able to use Link component for navigation also this component includes props like activeClassName and activeStyle that help you to modify active mode.
    for more information visit :
    Active links tutorial

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search