如何将用户重定向到同一页面中的另一个选项卡面板？ ReactJS

Question

我正在实现一个身份验证页面，其中包含一个带有两个

<AppBar>

的

<TabPanel>

。在注册选项卡中提交信息后，我想将用户重定向到登录选项卡。我已经搜索过这个问题，但找不到解决方案。

这是我在 App.jsx 中的代码：

function App() {

  return (
    <Router>
          <Routes>
            <Route exact path="/authentication" element={<Authentication />}/>
          </Routes>

        </div>
    
  </Router>
  );

}

export default App;

认证组件：

import PropTypes from "prop-types";
import Login from "./Login/Login";
import Signup from "./SignUp/Signup";

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

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

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

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

export default function Authentication() {
    const theme = useTheme();
    const [value, setValue] = useState(0);

    const handleChange = (event, newValue) => {
        setValue(newValue);
    };
    const handleChangeIndex = (index) => {
        setValue(index);
    };
    return (
        <div className="auth">
        <Box
            className="Mui-login-box"
            sx={{ bgcolor: "background.paper", width: 500 }}
        >
            <AppBar sx={{ backgroundColor: "#E55405" }} position="static">
            <Tabs
                value={value}
                onChange={handleChange}
                // indicatorColor="secondary"
                variant="fullWidth"
                TabIndicatorProps={{
                style: {
                    backgroundColor: "#1A237D",
                },
                }}
            >
                <Tab
                    style={{ color: "white", fontSize: 18 }}
                    label="Register"
                    {...a11yProps(0)}
                />
                {/*signup*/}
                <Tab
                    style={{ color: "white", fontSize: 18 }}
                    label="Login"
                    {...a11yProps(1)}
                />
            </Tabs>
            </AppBar>

            <TabPanel value={value} index={0}>
                <Signup />
            </TabPanel>
            <TabPanel value={value} index={1}>
                <Login />
            </TabPanel>
        </Box>
        </div>
);
}

这是我的注册组件：

const Signup = () => {
    const [values, setValues] = React.useState({
        firstName: "",
        lastName: "",
        email: "",
        password: "",
        confirmPassword: "",
        username: "",
        showPassword: false,
        showConfirmPassword: false,
    });

    const [firstnameError, setFirstnameError] = useState(false);
    const [lastnameError, setLastnameError] = useState(false);
    const [emailError, setEmailnameError] = useState(false);
    const [passwordError, setPasswordError] = useState(false);
    const [cofirmPasswordError, setCofirmPasswordError] = useState(false);
    const [usernameError, setUsernameError] = useState(false);

    const handleChange = (prop) => (event) => {
        if (prop === "confirmPassword" && event.target.value !== values.password)
            setCofirmPasswordError(true);
        else if (
        prop === "confirmPassword" &&
        event.target.value === values.password
        )
        setCofirmPasswordError(false);
        if (prop === "firstname") setFirstnameError(false);
        if (prop === "lastname") setLastnameError(false);
        if (prop === "password") setPasswordError(false);
        if (prop === "username") setUsernameError(false);
        if (prop === "email") setEmailnameError(false);

        setValues({ ...values, [prop]: event.target.value });
    }

    const handleClickShowPassword = () => {
            setValues({
            ...values,
            showPassword: !values.showPassword,
            });
    };

    const handleClickShowConfirmPassword = () => {
        setValues({
        ...values,
        showConfirmPassword: !values.showConfirmPassword,
        });
    };

    const handleMouseDownPassword = (event) => {
        event.preventDefault();
    };

    const onSignup = (e) => {
        e.preventDefault();
        if (!values.password) setPasswordError(true);
        if (!values.username) setUsernameError(true);
        if (!values.confirmPassword) setCofirmPasswordError(true);
        if (!values.firstName) setFirstnameError(true);
        if (!values.lastName) setLastnameError(true);
        if (!values.email) setLastnameError(true);

        if (values.password && 
            values.username && 
            values.confirmPassword &&
            values.firstName &&
            values.lastName &&
            values.email) {
                setFirstnameError(false);
                setLastnameError(false);
                setEmailnameError(false);
                setPasswordError(false);
                setCofirmPasswordError(false);
                setUsernameError(false);
                axios({
                    method: "post",
                    url: "http://127.0.0.1:8000/api/v1/accounts/register/",
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    data: {
                        first_name: values.firstName,
                        last_name: values.lastName,
                        email: values.email,
                        password: values.password,
                        password_again: values.confirmPassword,
                        username: values.username
                    }
                })
                .then((res) => {
                    window.location="/home/Dashboard/"
                })
                .catch((error) => {
                    toast.error("Unexpected error has occurred", {
                        position: toast.POSITION.BOTTOM_LEFT,
                        autoClose: 5000,
                        hideProgressBar: false,
                        closeOnClick: true,
                        pauseOnHover: true,
                        draggable: true,
                        progress: undefined,
                        theme: 'dark',
                    })
                })
            }

    }
    return (
        <div>
        {/* <div className="authLogo">
            <img src={logo} alt="logo" />
        </div> */}
        <div className="authLogoLabel" style={{ marginBottom: "1rem"}}>
            <h1>
                Welcome to <b className="NJText">Nomad Journey</b> !
            </h1>
        </div>
        <Box
            component="form"
            sx={{
            "& .MuiTextField-root": { m: 1, maxWidth: "100%" },
            }}
            noValidate
            autoComplete="off"
        >
            <form
            id={"Signup-Form"}
            onSubmit={(e) => {
                e.preventDefault();
                onSignup();
            }}
            >
            <FormControl fullWidth variant="outlined">
                <TextField
                    error={firstnameError}
                    helperText={firstnameError ? "Enter your firstname!" : ""}
                    id="outlined-adornment-firstname"
                    type={"text"}
                    value={values.firstName}
                    onChange={handleChange("firstName")}
                    label="Firstname"
                />
            </FormControl>
            <FormControl fullWidth variant="outlined">
                <TextField
                error={lastnameError}
                helperText={
                    lastnameError ? "Enter your lastname!" : ""
                }
                id="outlined-adornment-lastname"
                type={"text"}
                value={values.lastName}
                onChange={handleChange("lastName")}
                label="Lastname"
                />
            </FormControl>
            <FormControl fullWidth variant="outlined">
                <TextField
                error={usernameError}
                helperText={
                    usernameError ? "Enter a username!" : ""
                }
                id="signup-outlined-adornment-username"
                type={"text"}
                value={values.username}
                onChange={handleChange("username")}
                label="Username"
                />
            </FormControl>
            <FormControl fullWidth variant="outlined">
                <TextField
                error={emailError}
                helperText={
                    emailError ? "Enter a valid email!" : ""
                }
                id="signup-outlined-adornment-email"
                type={"text"}
                value={values.email}
                onChange={handleChange("email")}
                label="Email"
                />
            </FormControl>
            <FormControl fullWidth variant="outlined">
                <TextField
                error={passwordError}
                helperText={
                    passwordError ? "Peek a valid password!" : ""
                }
                id="outlined-adornment-password"
                type={values.showPassword ? "text" : "password"}
                value={values.password}
                onChange={handleChange("password")}
                InputProps={{
                    endAdornment: (
                    <InputAdornment>
                        <IconButton
                            aria-label="toggle password visibility"
                            onClick={handleClickShowPassword}
                            onMouseDown={handleMouseDownPassword}
                            edge="end"
                        >
                        {values.showPassword ? <VisibilityOff /> : <Visibility />}
                        </IconButton>
                    </InputAdornment>
                    ),
                }}
                label="Password"
                />
            </FormControl>
            <FormControl fullWidth variant="outlined">
                <TextField
                error={cofirmPasswordError}
                helperText={
                    cofirmPasswordError ? "Confirm password is not valid!" : ""
                }
                id="outlined-adornment-confirmPassword"
                type={values.showConfirmPassword ? "text" : "password"}
                value={values.confirmPassword}
                onChange={handleChange("confirmPassword")}
                InputProps={{
                    endAdornment: (
                    <InputAdornment>
                        <IconButton
                        aria-label="toggle password visibility"
                        onClick={handleClickShowConfirmPassword}
                        onMouseDown={handleMouseDownPassword}
                        edge="end"
                        >
                        {values.showConfirmPassword ? (
                            <VisibilityOff />
                        ) : (
                            <Visibility />
                        )}
                        </IconButton>
                    </InputAdornment>
                    ),
                }}
                label="Password confirmation "
                />
            </FormControl>
            <FormControl fullWidth variant="outlined">
                <Button
                    sx={{ m: 1 }}
                    onClick={onSignup}
                    variant="outlined"
                    size="large"
                    type="submit"
                >
                Submit
                </Button>
            </FormControl>
            </form>
        </Box>
        </div>
    )
}

export default Signup

这是输出：

对于如何在单击提交按钮后将用户自动重定向到登录面板的任何帮助，我将不胜感激。