Material-ui 选项卡单击提交转到下一页将删除该选项卡。我怎样才能解决这个问题？

Question

我有这些选项卡可以转到下一步。然而，一旦点击提交，这将转到正确的页面，但这也会删除该选项卡。我该如何解决这个问题？

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

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 [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(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={`/step1`}
          />
          <Tab label="Step 2" {...a11yProps(1)} />
        </Tabs>
      </Box>
      <TabPanel value={value} index={0}>
        <Step1 />
      </TabPanel>
      <TabPanel value={value} index={1}>
        <Step2 />
      </TabPanel>
    </div>
  );
};

export default Ordering;

Step1.js

导航到 step2 组件确实会转到下一页，但这也会删除选项卡

import { useNavigate } from "react-router-dom";

const Step1 = () => {
  const navigate = useNavigate();
  const handleSubmit = (e) => {
    e.preventDefault();
    navigate("/Step2");
  };

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

export default Step1;

Step2.js

const Step2 = () => {
  return <div>Step2</div>;
};

export default Step2;

Answer 1

在您的情况下，您没有正确嵌套路线。因此，对于嵌套路由，您需要在另一个路由中定义一个路由。有关详细信息，请参阅此页面 https://reactrouter.com/docs/en/v6/api#routes-and-route。

回到你的问题。您需要在两个地方更新代码。首先是路由是如何定义的。

<Route path="/page" element={<Page />}>
   <Route path="step1" element={<Step1 />} />
   <Route path="step2" element={<Step2 />} />
</Route>

一次，您的路线已更新。您正在根据路线链接您的面板。因此，您无需在 Page 组件中再次定义它们。您可以从那里删除那些组件，只需添加代码，以便在单击选项卡时更改导航栏 url。遗憾的是 mui 的 Tab 不支持组件属性 https://mui.com/api/tab/ 。您必须手动执行此操作。你可以使用 react router dom 提供的 useNavigate。您更新后的 Page 组件看起来像这样

我已添加评论 // 这是添加的。查看我在哪里进行了更改。只有 2 个地方需要更改。

import React, { useState, useEffect } from "react";

import { Box, Tab, Typography, Tabs } from "@mui/material";
import PropTypes from "prop-types";

import Step1 from "./Step1";
import Step2 from "./Step2";

import { Link } from "react";
// hook is imported
import { useNavigate } from "react-router-dom";

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 paths = ['/page/step1', '/page/step2']

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

  const handleChange = (event, newValue) => {
    setValue(newValue);
// This is added
    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={`/step1`}
          />
          <Tab label="Step 2" {...a11yProps(1)} />
        </Tabs>
      </Box>
      {/* Removed tab panels from here */}
    </div>
  );
};

export default Ordering;

Material-ui 选项卡单击提交转到下一页将删除该选项卡。我怎样才能解决这个问题？

Material-ui Tab clicking submit to go to the next page removes the tab. How can I fix this?

javascript

reactjs

material-ui