Question

我的导航页面上的导航设备需要不同的颜色。如何检查主页路由是否有效，而不是我想在导航栏上给出不同的样式？（如果是其他声明）。我试过使用window.location.href。它有效，但我必须先刷新我的页面。

＆＃13;

$(function() {
  if (window.location.href.indexOf("/") > -1) {
			$('nav').addClass('nav-scroll');
  }
});

＆＃13;

<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>

＆＃13;

Answer 1

如果您使用的是反应路由器版本4，那么您必须将历史记录作为道具，并且您可以在以下帮助下检查活动路线：

 history.pathname

否则你可以用javascript方式

 window.location

Answer 2

如果您使用的是react-router4，则应该可以使用Link组件进行导航，此组件还包含activeClassName和activeStyle等道具，可帮助您修改活动模式。欲了解更多信息，请访 Active links tutorial

如何检查路线是否有效？

2 个答案: