如何创建带有片段标识符（哈希链接）的 react 选项卡导航栏链接？-解网

问：

我创建了一个带有一些选项卡的页面。选项卡代码如下：

const [ toggleState, setToggleState ] = useState(1);

const toggleTab = (index) => {
 setToggleState(index);
}

<div className="tab-title-Container">
 <li className= {toggleState === 1 ? "tab-name active-name" : "tab-name"} 
  onClick={() => toggleTab(1)}>Tab1</li>
 <li className= {toggleState === 2 ? "tab-name active-name" : "tab-name"} 
  onClick={() => toggleTab(2)}>Tab2</li>
</div>
<div className="tab-content-Container">
 <div className= {toggleState === 1 ? "tab-content active-content" : "tab-content"}>
  Tab1 Content</div>
 <div className= {toggleState === 2 ? "tab-content active-content" : "tab-content"}>
  Tab2 Content</div>
</div>

style:
.tab-content {display: none;}
.active-content {display: block;}

现在我想创建每个选项卡的导航栏链接。当我单击 Tab2 导航栏链接时，此页面应打开，并且 Tab2 切换到活动类（默认活动选项卡为 Tab1）。我正在使用 react-router-dom“： ”^6.3.0”。

我需要为他们创建这样的“https://example.com/page=01#tab1”、“https://example.com/page=01#tab2”路线。

reactjs tabnavigator react-tabs react-router-hash-link

react-router-hash-linkAFAIK 尚未更新为与兼容。也就是说，您似乎没有将哈希值用于正常目的。可以从对象中读取 URL 值并进行分析以提取数字选项卡值。使用钩子“侦听”对的更改以更新本地状态。react-router-dom@6hashlocationuseEffecthashtoggleState

例：

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";

const Page = () => {
  const { hash } = useLocation();

  const [toggleState, setToggleState] = useState(1);

  useEffect(() => {
    setToggleState(Number(hash.slice(4))); // hash is "#tabX" so strip first 4 chars
  }, [hash]);

  const toggleTab = (index) => {
    setToggleState(index);
  };

  return (
    ...
  );
};

...

<Link to="/1#tab1">Page 1 tab 1</Link>
<Link to="/1#tab2">Page 1 tab 2</Link>
<Link to="/2#tab1">Page 2 tab 1</Link>
<Link to="/2#tab2">Page 2 tab 2</Link>

就像我说的，这是对 URL 哈希的有点奇怪。我认为查询参数将是一个改进的替代方案。

例：

import { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";

const Page = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const { pageId } = useParams();

  const [toggleState, setToggleState] = useState(1);

  useEffect(() => {
    // access tab query parameter
    const tab = searchParams.get("tab");
    if (tab) {
      // synchronize local state
      setToggleState(Number(tab));
    } else {
      // redirect to correct tab
      searchParams.set("tab", 1);
      setSearchParams(searchParams, { replace: true });
    }
  }, [searchParams, setSearchParams]);

  const toggleTab = (index) => {
    setToggleState(index);
  };

  return (
    ...
  );
};

...

<Link to="/1?tab=1">Page 1 tab 1</Link>
<Link to="/1?tab=2">Page 1 tab 2</Link>
<Link to="/2?tab=1">Page 2 tab 1</Link>
<Link to="/2?tab=2">Page 2 tab 2</Link>

如何创建带有片段标识符（哈希链接）的 react 选项卡导航栏链接？

How to create react tab navbar links with fragment identifiers (hash links)?

评论

评论