Reactjs 反应路由器（v4）导航栏

我正在使用react路由器dom的v4

我需要访问导航栏组件中的

this.props.match

，以便设置活动类。我正在使用react实现。在

标记中，我想添加

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-结合了我传递的道具和react路由器传递的道具

// 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);
    }}/>
  );
}

//exerpfrom:https://github.com/ReactTraining/react-router/issues/4105
导出常量renderMergedProps=（组件，…rest）=>{
const finalProps=Object.assign（{}，…rest）；
返回(
React.createElement（组件，finalProps）
);
}
export const PropsRoute=（{component，…rest}）=>{
返回(
{
返回renderMergedProps（组件、routeProps、rest）；
}}/>
);
}

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

---

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

在您的导航组件上，尝试使用react路由器的

而不是

是

的一个特殊版本，它将在呈现元素与当前URL匹配时向呈现元素添加样式属性

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

福
酒吧组
又一个Foo
另一个酒吧

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

福
酒吧组
又一个Foo
另一个酒吧

activeClassName是在元素处于活动状态时提供该元素的类。对于本例，我选择将其

选中

。默认情况下，在react router v4中，活动状态的给定类为

active

---

在react router v4上查找有关

的更多信息这是我如何实现它的，它与

“反应路由器dom”：“^4.2.2”

“反应引导”：“^0.31.5”

从'react router dom'导入{Link}；
从“react bootstrap”导入{NavBar，Nav，NavItem}；
常量导航栏=（{location}）=>(
艺术家
舞台
// ...

其中

location

是

路线的本机属性

：

希望这有帮助

---

编辑：刚刚注意到您正在使用react materialize，所以我的答案可能不适用于您的问题。

对于正在使用react引导v4（当前使用1.0.0-beta.5）和react路由器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>

从'react router dom'导入{Link，NavLink}
从“react bootstrap”导入{Navbar，Nav}
{/*“链接”在品牌组件中，因为只需要重定向*/}
品牌链接
{/*“NavLink”，因为需要“active”类样式*/}
家
另一个
再一个

以下是工作示例：

“react”：“^16.9.0”和“reactstrap”：“^8.0.1”

从“react router dom”导入{NavLink}；
从“reactstrap”导入{NavbarBrand}；
我的应用程序

我遇到的问题是将其与Materialize CSS集成。当我将Materialize CSS的

Navbar

组件与React router dom的Nav链接一起使用时，我松开了Materialize的样式，因为

NavLink

需要一个垂直的白色列表。当我使用Materialize CSS

NavItem

时，我得到了正确的样式，但访问不方便设置活动类。你能检查一下你是否真的能够成功地将任何道具传递到Nav.js组件吗？感谢你的回复，我直到现在才看到它。当我在我的渲染函数

this.props

的顶部输入

对象{children:undefined}时，它会输出
对象{children children:undefined}
。所以我认为它可以访问道具，但里面什么都没有。@SeyhanHuseyin当我使用
菜单
/
菜单时，它总是保持活动状态，不会更改类为什么？我尝试使用
activeClassName=“selected”
同样的问题保持
选中
类始终不更改另一个“所有”菜单正常…@MDAshik您指向
/
的链接始终处于活动状态，因为每个位置都以
/
开头。如果您只希望在路径名为
/
时该链接处于活动状态，则应使用
精确的
属性。例如amle:
test
查看上的部分以了解更多信息。我在正在处理的项目中有此设置，但尝试对某些页面使用dynamic:Id。动态路由不起作用（例如，Nav.Link as={NavLink}精确呈现“host/：userId/page”，而不是动态的“host/{uid}/page”）.您能解释一下如何使用导航链接实现此功能吗？
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>

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

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