url 在反应路由器中没有一致地改变

Question

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

我得到的行为很奇怪。有时 url 会随着我在选项卡之间切换而改变。它很好用。然后有时 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

Answer 1

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

只有每个 tab/button 中间的文本部分是 实际的 link，因此导航只有在您精确单击文本时才有效每个选项卡的一部分是 link.

要解决这个问题，您可以将每个 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>

Answer 2

如下2张截图。

如您所见，'a' 标签位于 'button' 标签中。 “a”的实际大小非常小。如果您可能单击 tab1，它是由按钮发生的。所以，拜托，Drew Reese 的回答很适合你。谢谢

Answer 3

您可以做的是在您的选项卡上添加 onClick={()=>history.push('/route')}。

这里是如何初始化history:

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

url 在反应路由器中没有一致地改变

url not changing consistently in react router

javascript

reactjs

reach-router