javascript 如何区分react router中带id(例如/about#contact)的活动路由和不带id(例如/about)的活动路由< NavLink />？

pftdvrlh 于 2023-01-16 发布在 Java

关注(0)|答案(1)|浏览(97)

我有一个关于页面（"/about"），其中包括一个联系表单。我用一个ID链接了该表单（例如contact-form）。我有一个带有以下链接的导航栏：“Home”、“About”、“Contact”。我为活动路线设置了一些基本样式：

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

export default function Nav() {
  let activeStyle = {
    textDecoration: "underline",
  };

  return(
    <nav>
      <ul>
        <li>
          <NavLink to="/" style={({isActive}) => isActive ? activeStyle : 
               undefined}>
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" style={({isActive}) => isActive ? activeStyle : 
               undefined}>
            About
          </NavLink>
        </li>
        <li>
          <NavLink to="/about#contact" style={({isActive}) => isActive ? activeStyle : 
               undefined}>
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

当我单击“关于”或“联系人”时，两个路由器都处于活动状态，但这不是所需的行为。我如何区分这两个路由器？我希望一次有一个路由器处于活动状态。

JavaScript

来源：https://stackoverflow.com/questions/75123984/how-do-i-differentiate-an-active-route-with-an-id-e-g-aboutcontact-from-an-a

1条答案

按热度按时间

a0zr77ik1#

这肯定不是任何支持开箱即用的东西。请参阅此Github issue关于"NavLink在哈希链接上不活动"的内容。
一位核心维护者回应：
我们不支持哈希链接。这是因为HashRouter和需要支持基于哈希的历史记录。
要解决这个问题，您可以添加一些React状态来管理"散列"，并将其添加到活动匹配中。
示例：

import React from "react";
import { NavLink } from "react-router-dom";

function Nav() {
  const [hash, setHash] = React.useState();

  let activeStyle = {
    color: "green",
    textDecoration: "underline"
  };

  return (
    <nav>
      <ul>
        <li>
          <NavLink
            to="/"
            onClick={() => setHash()}
            end
            style={({ isActive }) => (isActive ? activeStyle : undefined)}
          >
            Home
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/about"
            onClick={() => setHash()}
            end
            style={({ isActive }) =>
              isActive && !hash ? activeStyle : undefined
            }
          >
            About
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/about#contact"
            onClick={() => setHash("contact")}
            end
            style={({ isActive }) =>
              isActive && hash === "contact" ? activeStyle : undefined
            }
          >
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

要点是根据单击的链接设置/清除hash状态，并使用hash状态匹配链接的目标路径字符串的哈希值。

第一节第一节第一节第二节第一节

赞(0）回复(0）举报 2023-01-16

我来回答

javascript 如何区分react router中带id(例如/about#contact)的活动路由和不带id(例如/about)的活动路由< NavLink />？

1条答案

相关问题

热门标签

最新问答