React Routing：如何根据 url 重定向到匹配的选项卡？

Question

这个问题我卡了好几天了。我的问题是当我输入该选项卡的 url 时如何跳转到目标选项卡。

你可以找到我的代码here

在这段代码中，我使用 material-ui 选项卡组件制作了一个选项卡。正如您从 codesandbox 中的工作示例中看到的那样，我在 页面 url 之后附加了选项卡 suburls带分隔符 #.

这是通过handleChange方法完成的。

import { useHistory, useLocation } from "react-router-dom";
const location = useLocation();

const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
  setValue(newValue);
  history.replace({
    hash: `${tabs[newValue].suburl}`
  });
};

并且在 Tabs 组件 onChange 道具上调用 handleChange 方法。像这样：

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="Top Statistic Tabs"
>
  {TabHeaders}
</Tabs>

在工作示例中切换不同的选项卡时，您可以看到 url 变化。

但是，我的问题是反转不起作用。当您输入一个选项卡 url 并按回车键时，它不会跳转到匹配的选项卡。我认为这是因为没有为每个 url 定义匹配路由器，但不确定也不知道该怎么做。

框架代码来自https://material-ui.com/components/tabs/#customized-tabs，我只是添加了suburl 添加部分。

请回答任何你知道的问题。

反应版本：17.0.2
React-router-dom 版本：4.3.4
Material-ui版本：4.12.3

提前致谢。

Answer 1

你的codesandbox是updated。请审核。

活动选项卡由索引控制，当您手动单击选项卡并更新索引时，它工作正常。刷新页面的问题是由于初始化中的以下代码造成的。

const [value, setValue] = React.useState(0);

初始化时，您总是将第一个选项卡设置为活动选项卡，而不是考虑位置哈希。要解决此问题，解决方案之一是您可以使用三元检查来查看位置对象中是否存在一些哈希，并根据该哈希值初始化值状态。

const [value, setValue] = React.useState(
location?.hash === "#tokentxnsErc20"
  ? 2
  : location?.hash === "#internaltx"
  ? 1
  : 0
);

React Routing：如何根据 url 重定向到匹配的选项卡？

React Routing : How can I be redirected to matching tab according to url?

tabs

reactjs

material-ui

react-router-dom