url在反应路由器中没有一致变化答案

【问题标题】：url not changing consistently in react routerurl在反应路由器中没有一致变化
【发布时间】：2022-01-04 21:26:12
【问题描述】：

我在使用 @reach/router 时出现了奇怪的行为我的目标是有一个带有标签的页面。当我单击一个选项卡时，url 会发生变化，页面也会发生变化（尽管它不会重新加载整个页面）。我一直在使用chakra ui，因为它使主题对我来说更容易。

我得到的行为很奇怪。有时，当我在选项卡之间切换时，网址会发生变化。它工作得很好。然后有时 url 不会改变，即使我已经切换了标签。

我的项目位于[这里][1]

import React from "react";
import { Router, Link } from "@reach/router";

import {
  Tab,
  Tabs,
  TabList,
  TabPanel,
  TabPanels,
  useColorModeValue
} from "@chakra-ui/react";
import Somatic from "../pages/somatic";
import Ef from "../pages/executive_functions_coaching";
import Intro from "../pages/home";

function ConceptTabs(props) {

  const [tabIndex, setTabIndex] = React.useState(0);
  

  return (
    <>
      <Tabs
        size="lg"
        isFitted
        variant="soft-rounded"
        colorScheme="yellow"
        onChange={(index) => {
          setTabIndex(index);
        }}
      >
        <TabList>
          <Tab>
            <Link to="/">
              Tab1
            </Link>
          </Tab>
          <Tab>
            <Link to="/executive_functions_coaching/">
              Tab2
            </Link>
          </Tab>
          <Tab>
            <Link to="/somatics/">
             Tab3
            </Link>
          </Tab>
        </TabList>
        <TabPanels p="2rem">
          <TabPanel>
            <Router>
            <Intro path='/' />
            </Router>
          </TabPanel>
          <TabPanel>
            <Router>
            <Ef path='/executive_functions_coaching/' />
            </Router>
          </TabPanel>
          <TabPanel>
            <Router>
            <Somatic path='/somatics/' />
            </ Router>
          </TabPanel>
        </TabPanels>
      </Tabs>
    </>
  );
}

export default ConceptTabs;

我尝试使用<NavLink>，但遇到了类似问题。我对路由很陌生，但我已经让它在没有标签的情况下工作。我想知道是否有办法让路由器使用标签？

谢谢 [1]：https://codesandbox.io/s/reach-router-example-forked-ydcqz?file=/src/components/ConceptTabs.js:0-1471

【问题讨论】：

删除 ....然后会发生什么
谢谢@KeatonBenning... 情况变得更糟了。与更改网址更不一致
您的链接代码和框没有运行，它似乎缺少文件。当您有一个运行 CSB 供我们检查时，您能否对其进行编辑以解决问题并报告回来？根据我在上面看到的，您的路由器太多了……您通常只需要一个包装整个应用程序即可提供任何路由上下文。我敢肯定，reach-router 与 react-router 的表亲库没有什么不同。
感谢您提请我注意@DrewReese。我之前编辑过它，但它没有保存。我又做了一次并简化了它。它现在在我这边工作。希望文件保存。链接仍然有问题，但沙箱应该可以正常运行
另外 - @DrewReese 我试过一个路由器，但我不知道如何让它与选项卡一起使用。我使用的选项卡功能围绕着每个页面的内容，因此我无法将路由器放置在选项卡中的不同页面周围。我能够在 index.js 中放置一个路由器，但它仍然无法正常工作

标签： javascript reactjs reach-router

【解决方案1】：

您将reach-router 和react-router-dom 混合在一起似乎很奇怪，它是继任者，但选项卡问题的根源是因为每个Tab 组件都在呈现Link，但整个选项卡不是负责导航。

只有每个选项卡/按钮中间的文本部分是实际链接，因此只有在您精确单击每个选项卡的文本部分即链接时，导航才有效。 p>

要解决此问题，您可以将每个Tab 组件作为呈现一个Link 组件。

The as prop and custom component

<TabList>
  <Tab as={Link} to="/">
      tab1
  </Tab>
  <Tab as={Link} to="/executive_functions_coaching/">
    tab
  </Tab>
  <Tab as={Link} to="/somatics/">
    tab3
  </Tab>
</TabList>

【讨论】：

非常感谢@DrewReese。有用。我也很感激你向我展示了理解这个问题的过程。带有检查元素的屏幕截图很棒。

【解决方案2】：

如下2个截图。

如您所见，“a”标签位于“按钮”标签中。 “a”的实际尺寸非常小。如果您可能单击tab1，它是由按钮发生的。所以，拜托，德鲁里斯的答案很适合你。谢谢。

【讨论】：

【解决方案3】：

你可以做的是在你的标签上添加onClick={()=>history.push('/route')}。

这里是如何初始化history：

improt { useHistory } from 'react-router-dom';
// inside your component:
history = useHistory();

【讨论】：