Question

我正在使用reactjs创建一个项目。在我的应用程序中，我正在使用它来获取活动路径：

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <size
                android:width="56dp"
                android:height="56dp" />

            <stroke
                android:width="10dp"
                android:dashGap="20dp"
                android:color="#0000ff" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <size
                android:width="25dp"
                android:height="24dp" />

            <stroke
                android:width="10dp"
                android:color="#FF0000"
                android:dashGap="20dp"
                android:dashWidth="10dp" />
        </shape>
    </item>

</layer-list>

但是未定义，我正在使用react-router 4.Earlier当我使用较低版本的react-router时，这对我有用。这是我的代码：

this.context.router.isActive

Answer 1

在react-router v4中架构已更改，并且不再支持this.context.router.isActive。

在react-router-v4中，您可以自己使用公开的NavLink组件而不是创建NavLink。

<强> From the documentation:

<强> NavLink

将添加样式属性的特殊版本   当与当前URL匹配时呈现的元素。
import { NavLink } from 'react-router-dom'

<NavLink to="/about">About</NavLink>

它还为您提供了activeClassName prop：

activeClassName：string

在元素处于活动状态时赋予元素的类。默认给定   班是活跃的。这将与className prop。
结合使用
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

为什么不支持this.context.router.isActive：

以下摘自 github 问题

渲染<Route>并不一定意味着＆＃34;只有在匹配当前位置时才会渲染＆＃34;。例如，它可以用于将来自上下文的路由器变量作为props注入组件。

在<NavLink>中，<Route>正在使用子prop，这意味着无论路由是否匹配，它都会调用子函数。如果匹配为空，那么我们知道它不匹配。

如果您不希望以这种方式使用<Route children>，React Router会提供matchPath函数的命令式方法。这是<Switch>es和<Route>s在内部使用以匹配路径的位置。

如果您的组件没有收到Router道具，那么您可以使用withRouter HOC注入它

import { withRouter } from 'react-router';

export class withRouter(MyComponent);

在ReactJs中使用react-router获取活动路由

1 个答案: