Question

我使用的是react-react-dom的v4

我需要访问导航栏组件中的this.props.match，以便设置活动类。我正在使用react-materialize。在<NavItem>标记中，我想添加className={this.props.match ? 'active' : ''}。但是，我似乎无法访问该比赛。每次我在控制台中打印时，道具都是一个空对象。

我的Nav.js

<Navbar brand='Fuzic' href="/" className="orange darken-3" right>
  <NavItem className={this.match ? 'active' : ''} href="/devices">Devices</NavItem>
  <NavItem><Link to="/devices">Media</Link></NavItem>
  <NavItem><Link to="/devices">Alarms</Link></NavItem>
  <NavItem><Link to="/devices">Interrupts</Link></NavItem>
  <NavItem><Link to="/auth">Admin</Link></NavItem>
</Navbar>

我的App.js

<BrowserRouter>
  <div>
    <Nav/>
    <div className="container">
      <Switch>
        <PropsRoute exact path="/" component={Auth}/>
        <PropsRoute exact path="/devices" component={Devices} devices={this.state.devices} setCurrentDevice={this.setCurrentDevice} />
        <PropsRoute path="/devices/:deviceId" component={Detail} currentDevice={this.state.currentDevice} />
        <PropsRoute path="/auth" component={Auth}/>
        <PropsRoute component={NotFound}/>
      </Switch>
    </div>
  </div> 
</BrowserRouter>

helper.js - 结合我传递的道具＆amp;从react-router

传递的道具

// Exerp From:  https://github.com/ReactTraining/react-router/issues/4105
export const renderMergedProps = (component, ...rest) => {
  const finalProps = Object.assign({}, ...rest);
  return (
    React.createElement(component, finalProps)
  );
}

export const PropsRoute = ({ component, ...rest }) => {
  return (
    <Route {...rest} render={routeProps => {
      return renderMergedProps(component, routeProps, rest);
    }}/>
  );
}

大多数在线文档和文章适用于v2和3。 v4的文档没有详细介绍如何处理这个问题。许多人为他们的应用程序嵌套了一条路线。但是，当我这样做时，我会在控制台中看到堆栈溢出，并打印出帧。

如何修复此问题以便我可以访问匹配？

Answer 1

在导航组件上，尝试使用反应路由器<NavLink>而不是<Link>。

<NavLink>是<Link>的一个特殊版本，它会在与当前网址匹配时为渲染元素添加样式属性。

<NavLink>具有 activeClassName 和 activeStyle 属性，您可以使用这些属性将样式应用于活动导航项。

例如，基本导航将是这样的：

<nav>
    <NavLink activeStyle={{color: 'red'}} to="/foo">Foo</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/bar">Bar Group</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/another-foo">Another Foo</NavLink>
    <NavLink activeStyle={{color: 'red'}} to="/another-bar">Another Bar</NavLink>
</nav>

activeStyle 表示在元素处于活动状态时应用于该元素的样式。

在同一个例子中，通过 activeClassName ：

<nav>
    <NavLink activeClassName="selected" to="/foo">Foo</NavLink>
    <NavLink activeClassName="selected" to="/bar">Bar Group</NavLink>
    <NavLink activeClassName="selected" to="/another-foo">Another Foo</NavLink>
    <NavLink activeClassName="selected" to="/another-bar">Another Bar</NavLink>
</nav>

activeClassName 是在元素处于活动状态时为其提供的类。对于此示例，我选择它为selected。默认情况下，react-router v4给定的活动状态类为active。

在react-router v4 documentation

上详细了解<NavLink>

Answer 2

这是我实现它的方式，它适用于
function show() { var digital=new Date() document.write("Local " + digital.toLocaleTimeString("en-US", { hour: "2-digit", minute:"2-digit" }) + "<br>"); document.write("Tokyo " + digital.toLocaleTimeString("en-US", { timeZone: "Asia/Tokyo", hour: "2-digit", minute:"2-digit" })); } show();
"react-router-dom": "^4.2.2"

"react-bootstrap": "^0.31.5"

其中import { Link } from 'react-router-dom'; import { NavBar, Nav, NavItem} from 'react-bootstrap'; const NavBar = ({location}) => ( <NavBar> <Nav> <NavItem componentClass={Link} href="/artists" to="/artists" active={location.pathname === '/artists'}>Artists</NavItem> <NavItem componentClass={Link} href="/stages" to="/stages" active={location.pathname === '/stages'}>Stages</NavItem> </Nav> <NavBar> // ...是location的原生属性：https://reacttraining.com/react-router/web/api/location

希望这有帮助。

编辑：注意到您使用的是Route，所以我的回答可能不适用于您的问题。

Answer 3

“反应”：“ ^ 16.9.0”和“反应带”：“ ^ 8.0.1”

import { NavLink} from "react-router-dom";
import { NavbarBrand} from "reactstrap";

 <NavLink 
  className="navbar-brand"
  activeClassName="active"
  tag={NavbarBrand}
  to='/'
  >
  My App
  </NavLink>

Answer 4

对于那些正在使用react-bootstrap v4（当前使用1.0.0-beta.5）和react-router-dom v4（4.3.1）的用户，只需使用Nav.Link中的“ as”道具，就可以了例如：

import { Link, NavLink } from 'react-router-dom'
import { Navbar, Nav } from 'react-bootstrap'

<Navbar>
  {/* "Link" in brand component since just redirect is needed */}
  <Navbar.Brand as={Link} to='/'>Brand link</Navbar.Brand>
  <Nav>
    {/* "NavLink" here since "active" class styling is needed */}
    <Nav.Link as={NavLink} to='/' exact>Home</Nav.Link>
    <Nav.Link as={NavLink} to='/another'>Another</Nav.Link>
    <Nav.Link as={NavLink} to='/onemore'>One More</Nav.Link>
  </Nav>
</Navbar>

这是有效的示例：https://codesandbox.io/s/3qm35w97kq

React Router（v4）Navbar

4 个答案: