Question

我像下面这样渲染<NavLink />

<div class="container">
  <NavLink to="/" exact></NavLink>
  <NavLink to="/profile"></NavLink>
  <NavLink to="/message"></NavLink>
</div>

react-router会添加一个当前匹配的active类，这很酷。

但是我怎么知道哪个是当前活跃的？

因为我还有其他需要调整的样式，例如在'/'中，我想给.container左上角100px，而在'/ profile'中，我想给{ {1}}向左填充200px。

Answer 1

您可以为它们每个添加一个不同的activeClassName。

（请参见https://reacttraining.com/react-router/web/api/NavLink）

例如

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'db_name',                      
        'USER': 'db_user',
        'PASSWORD': 'db_user_password',
        'HOST': '',
        'PORT': 'db_port_number',
    }
}

然后像这样的<div class="container"> <NavLink to="/" exact></NavLink> <NavLink to="/profile" activeClassName="matched-profile"></NavLink> <NavLink to="/message"></NavLink> </div>

样式容器

Answer 2

您可以使用withRouter来获取当前页面的路径，通过使用路径名可以归档当前页面。

import React from "react";
import { withRouter } from "react-router";

class Location extends React.Component {
  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

const WithRouter = withRouter(ShowTheLocation);

React Router得到哪个<navlink>是活跃的？

2 个答案: