在 ReactJs 中使用 react-router 获取活动路由 [英] Get an active route with react-router in ReactJs

问题描述

我正在使用 reactjs 创建一个项目.在我的应用程序中，我使用以下方法获取活动路由:

I am creating a project using reactjs.In my application i am getting the active route using this:

this.context.router.isActive

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

but getting undefined, i am using the react-router 4.Earlier this was worked for me when am using the lower version of react-router. Here is my code:

class NavLink extends React.Component {

    render() {


     console.log( this.context.router.isActive)
          let isActive = this.context.router.isActive(this.props.to, true);
           let className = isActive ? "active" : "";
        return(
            <li  className={className} {...this.props}>
               <Link {...this.props}/>
            </li >
        );
    }
}

NavLink.contextTypes = {
    router: PropTypes.object
};

推荐答案

react-router v4 中的架构发生了变化，不再支持 this.context.router.isActive.

The architecture has changed in react-router v4 and this.context.router.isActive is no longer supported.

在 react-router-v4 中，您可以使用公开的 NavLink 组件代替自己创建 NavLink.

In react-router-v4, you could instead of creating a NavLink yourself use the exposed NavLink component.

来自文档:

导航链接

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

A special version of the that will add styling attributes to the rendered element when it matches the current URL.

import { NavLink } from 'react-router-dom'

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

它还为您提供了一个 activeClassName 属性:

It also provides you an activeClassName prop:

activeClassName:字符串

当元素处于活动状态时为其赋予的类.默认给定班级活跃.这将与 className 道具一起使用.

The class to give the element when it is active. The default given class is active. This will be joined with the className prop.

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

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

以下摘自 github问题

Here is an excerpt from a github issue

渲染 并不一定意味着仅在匹配当前位置时才渲染".例如，它可以用于将上下文中的路由器变量作为 props 注入到组件中.

Rendering a <Route> does not necessarily mean "only render when you match the current location". For example, it can be used inject the router variables from the context into a component as props.

在 中， 使用了 children 属性，这意味着无论路由是否匹配，它都会调用 children 函数.如果匹配为空，则我们知道它不匹配.

In <NavLink>, the <Route> is using the children prop, which means that it will call the children function whether or not the route matches. If the match is null, then we know that it did not match.

如果您不想以这种方式使用 ，React Router 提供了一种带有 matchPath 函数的命令式方法.这是 es 和 s 在内部用于将位置与路径匹配的内容.

If you would prefer not to use <Route children> in this way, React Router offers an imperative approach with the matchPath function. This is what <Switch>es and <Route>s use internally to match a location against a path.

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

If your component is not receiving the Router props, then you could inject it using the withRouter HOC

import { withRouter } from 'react-router';

export class withRouter(MyComponent);

这篇关于在 ReactJs 中使用 react-router 获取活动路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！