单击提交按钮转到下一个选项卡只会更改 URL 但不会更改选项卡和组件本身。我该如何解决？

Question

我有步骤 1 和步骤 2 的这些选项卡。在第 1 步中，我有这个提交按钮转到下一个选项卡，它确实更新了 URL，但组件没有更新。它仍然停留在 tab1 上。我该如何解决这个问题？

我有点想在用户单击 Step1

中的 submit 按钮后将用户定向到第 2 步选项卡

我在 codesandbox 中重新创建了这个：https://codesandbox.io/s/dawn-cloud-uxfe97?file=/src/Page.js

export default function App() {
  return (
    <div className="App">
      <Link to="/page">
        <button>Click this to go to the page</button>
      </Link>
      <Routes>
        <Route path="/page" element={<Page />}>
          <Route path="step1" element={<Step1 />} />
          <Route path="step2" element={<Step2 />} />
        </Route>
      </Routes>
    </div>
  );
}

制表符

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography component="span">{children}</Typography>
        </Box>
      )}
    </div>
  );
}

TabPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.number.isRequired,
  value: PropTypes.number.isRequired
};

function a11yProps(index) {
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`
  };
}

const Ordering = () => {
  const navigate = useNavigate();
  const [value, setValue] = React.useState(0);

  const paths = ["/page/step1", "/page/step2"];
  const handleChange = (event, newValue) => {
    setValue(newValue);
    navigate(paths[newValue]);
  };

  return (
    <div>
      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="basic tabs example"
        >
          <Tab
            label="Step 1"
            {...a11yProps(0)}
            component={Link}
            to={`/page/step1`}
          />
          <Tab
            label="Step 2"
            {...a11yProps(1)}
            component={Link}
            to={`/page/step2`}
          />
        </Tabs>
      </Box>

      <TabPanel value={value} index={0}>
        <Step1 />
      </TabPanel>
      <TabPanel value={value} index={1}>
        <Step2 />
      </TabPanel>
    </div>
  );
};

export default Ordering;

Answer 1

您在 Step1 组件中有错字，它导航到 "/page/Step2" 而不是“/page/step2”。

const Step1 = () => {
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    navigate("/page/step2"); // <-- fix target path
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        step1
        <input type="submit" />
      </form>
    </div>
  );
};

Page 组件的主要问题是它没有“侦听”外部路由更改。您需要监听这些并手动更新 value 状态以匹配当前路径。

示例：

const Ordering = () => {
  const { pathname } = useLocation(); // <-- current path
  const navigate = useNavigate();
  const [value, setValue] = React.useState(0);

  const paths = useMemo(() => ["/page/step1", "/page/step2"], []);

  useEffect(() => {
    const value = paths.indexOf(pathname);
    setValue(value !== -1 ? value : 0); // <-- set the value to match path
  }, [pathname, paths]);

  const handleChange = (event, newValue) => {
    setValue(newValue);
    navigate(paths[newValue]);
  };

  return (
    <div>
      <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
        <Tabs
          value={value}
          onChange={handleChange}
          aria-label="basic tabs example"
        >
          <Tab
            label="Step 1"
            {...a11yProps(0)}
            component={Link}
            to={`/page/step1`}
          />
          <Tab
            label="Step 2"
            {...a11yProps(1)}
            component={Link}
            to={`/page/step2`}
          />
        </Tabs>
      </Box>

      <TabPanel value={value} index={0}>
        <Step1 />
      </TabPanel>
      <TabPanel value={value} index={1}>
        <Step2 />
      </TabPanel>
    </div>
  );
};

单击提交按钮转到下一个选项卡只会更改 URL 但不会更改选项卡和组件本身。我该如何解决？

Clicking the submit button to go to the next tab only changes the URL but not the tab and the component itself. How can I fix?

javascript

reactjs

material-ui

react-router-dom