Javascript 默认情况下高亮显示底部导航栏按钮选择（React router）

你好

我是新手。我试图在从/启动web应用程序时突出显示我的“主页”按钮，类似于。但是相反，我得到了

我正在使用React路由器，我的代码：

Navigation.js。用于底部导航栏

import React from 'react';
import { Nav, NavItem} from 'reactstrap';
import { NavLink } from 'react-router-dom';
..
const tabs = [{
    route: "/home",
    icon: faHome,
    label: "Home"
  },{
    route: "/resources",
    icon: faFolder,
    label: "Files"
  },{
    route: "/vault",
    icon: faDiceD20,
    label: "the Vault"
  },{
    route: "/parts",
    icon: faTools,
    label: "Parts"
  },{
    route: "/login",
    icon: faUserCircle,
    label: "Me"
  }]

const Navigation = (props) => {

<nav className="navbar fixed-bottom navbar-light d-block d-lg-none bottom-tab-nav" role="navigation">
        <Nav className="w-100">
          <div className=" d-flex flex-row justify-content-around w-100">
            {
              tabs.map((tab, index) =>(
                <NavItem key={`tab-${index}`}>
                  <NavLink to={tab.route} className="nav-link bottom-nav-link" activeClassName="active">
                    <div className="row d-flex flex-column justify-content-center align-items-center">
                      <FontAwesomeIcon size="lg" icon={tab.icon}/>
                      <div className="bottom-tab-label">{tab.label}</div>
                    </div>
                  </NavLink>
                </NavItem>
              ))
            }
          </div>
        </Nav>
      </nav>
};

---

谢谢你的阅读。请让我知道是否有更简单的方法来实现这一点。谢谢

您可以使用一个名为useLocation的钩子，它返回当前位置对象。这在您需要知道当前URL的任何时候都可能有用

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

function highlightLocation() {
    const location = useLocation();
    console.log(location.pathname);
    //Your code to highlight it
}

我试图在启动时突出显示我的“主页”按钮 来自的web应用程序/

由于您的主页位于路径

/

上，因此需要将其指定为选项卡数组中的一个选项卡

const tabs = [{
    route: "/",
    icon: faHome,
    label: "Home"
  }
  ...

接下来，添加路径

/

<Route path="/" exact component={Home}/>

此时，

/home

路线可能会被省略，您可以将

start\u url

更改回

“start\u url”：“/”

---

最后，重构你的

NavLink

使其具有prop

exact={true}

，这样，只有当路径正好位于根目录下时，样式才会应用

我可以看到你的

选项卡

数组吗？您好@95faf8e76605e973我已经编辑了我的帖子，如果您在PWA上进行测试，对于Chrome来说，关于清单的更改可能不会立即反映出来。请看我的回答：谢谢！我已经做了改变。然而，现在无论我在哪一页，“主页”都会突出显示。我已经包括了

exact={true}

too您需要将

exact={true}

放在

NavLink

上，而不仅仅是

路线

。i、 e.，

啊！好的，我现在明白了。谢谢，伙计，工作得很有魅力：）

const tabs = [{
    route: "/",
    icon: faHome,
    label: "Home"
  }
  ...

<Route path="/" exact component={Home}/>