React路由中URL不一致。

Question

我在使用@reach/router时遇到了一些奇怪的行为。我的目标是创建一个带有选项卡的页面，当我点击选项卡时，URL会更改并且页面会更改（尽管不会重新加载整个页面）。我一直在使用chakra ui，因为它让主题制作更容易。

我得到的行为很奇怪。有时URL会随着我切换选项卡而更改，这很好用。但有时即使我已经切换了选项卡，URL也不会更改。

我的项目位于此处。

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>，但遇到了类似的问题。我对路由很陌生，但我已经在没有选项卡的情况下使其正常工作。我想知道是否有一种方法可以让路由器与选项卡一起工作？

- Katie Melosto

---

移除 <Router> <Router /> 标签后会发生什么？ - Keaton Benning

谢谢@KeatonBenning...情况变得更糟了。随着URL的更改，不一致性更加明显。 - Katie Melosto

你的链接 codesandbox 无法运行，似乎缺少文件。你能编辑它来修复问题，并在你有一个可运行的 CSB 检查之后报告回来吗？根据我上面看到的内容，你有太多路由器了...通常只需要一个包装整个应用程序来提供任何路由上下文。我确信reach-router这个类库与react-router没有什么不同。 - Drew Reese

感谢您提醒我，@DrewReese。我之前已经编辑过了，但是没有保存。现在我又重新编辑并简化了它。在我的端上它现在可以工作了。希望文件已经保存。链接仍然有问题，但沙盒应该可以正常运行。 - Katie Melosto

此外 - @DrewReese 我曾尝试使用单个路由器，但我不知道如何使其与选项卡一起工作。我正在使用的选项卡功能包围每个页面的内容，因此我无法将路由器放在选项卡中不同的页面周围。我能够在index.js中放置一个路由器，但它仍然不能很好地与之配合。 - Katie Melosto

Answer 1

看起来您正在混合使用reach-router和它的后继者react-router-dom，但是您在选项卡上遇到的问题的根本原因是每个Tab组件都会呈现一个Link，但整个选项卡并不负责导航。

每个选项卡/按钮中间的文本部分才是实际链接，所以只有当您精确地单击作为链接的每个选项卡的文本部分时，导航才会起作用。

要解决此问题，您可以将每个Tab组件呈现为Link组件。 asprop和自定义组件。

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

- Drew Reese

Answer 2

请看以下两张截图。 如您所见，'a'标签在'button'标签中。 实际大小的"a"非常小。 如果您单击tab1，则是由按钮触发的。 因此，请参考Drew Reese的答案。 谢谢。

- genius dev

Answer 3

您可以在选项卡上添加onClick={()=>history.push('/route')}来实现此功能。

以下是初始化history的方法：

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

- Moussa Bistami