javascript - 使用 React Router 登录成功后重定向到下一页

Question

我创建了一个基本的 MERN 登录页面，但我对如何在成功登录后重定向用户感到有点困惑。我创建了一个登录上下文，当用户成功登录时，我将登录状态设置为真的。我不确定如何重定向到/items 路线。任何帮助，将不胜感激。这是我的应用程序代码:

function App() {
  return (
    <LoggedInProvider>
      <ThemeProvider>
        <Switch>
          <Route
            exact
            path="/"
            render={() => <SignIn />}
          />
          <Route
            exact
            path="/items"
            render={() => <Index />}
          />
        </Switch>
      </ThemeProvider>
    </LoggedInProvider>
  );
}

export default App;

这是我的登录组件:

function Form(props) {
  const { isDarkMode } = useContext(ThemeContext);
  const { loggedIn, changeLogIn } = useContext(LoggedInContext);
  const [isSignUp, setSignUp] = useState(false);
  const { classes } = props;

  const [usernameValue, setUsernameValue] = useState('');
  const [passwordValue, setPasswordValue] = useState('');

  const handleUsernameChange = (e) => {
    setUsernameValue(e.target.value);
  };
  const handlePasswordChange = (e) => {
    setPasswordValue(e.target.value);
  };
  // const [value, setValue] = useState(initialVal);
  //   const handleChange = (e) => {
  //       setValue(e.target.value);
  //   };

  const handleClick = () => {
    setSignUp(!isSignUp);
  };
  const reset = () => {
    setUsernameValue('');
    setPasswordValue('');
  };

  const authSubmitHandler = async (event) => {
    event.preventDefault();

    if (!isSignUp) {
      try {
        const response = await fetch('http://localhost:8181/auth', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            username: usernameValue,
            password: passwordValue,
          }),
        });

        const responseData = await response.json();
        if (responseData.code === 200) {
          console.log('Success Response');
          changeLogIn(true);
          reset();
        }
        console.log('This is a response');
        console.log(responseData);
      } catch (err) {
        console.log(err);
      }
    } else {
      try {
        const response2 = await fetch('http://localhost:8181/auth', {
          method: 'PUT',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            username: usernameValue,
            password: passwordValue,
          }),
        });

        const responseData2 = await response2.json();
        console.log(responseData2);
      } catch (err) {
        console.log(err);
      }
    }
  };

  return (
    <main className={classes.main}>
      {!isSignUp ? (
        <Paper
          className={classes.paper}
          style={{ background: isDarkMode ? '#2E3B55' : 'white' }}
        >
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography variant="h5">Sign In</Typography>
          <form
            className={classes.form}
            onSubmit={authSubmitHandler}
          >
            <FormControl
              margin="normal"
              required
              fullWidth
            >
              <InputLabel htmlFor="username">Username</InputLabel>
              <Input
                id="username1"
                name="username1"
                value={usernameValue}
                onChange={handleUsernameChange}
                autoFocus
              />
            </FormControl>
            <FormControl
              margin="normal"
              required
              fullWidth
            >
              <InputLabel htmlFor="password">Password</InputLabel>
              <Input
                id="password"
                name="password"
                type="password"
                value={passwordValue}
                onChange={handlePasswordChange}
                autoFocus
              />
            </FormControl>

            <Button
              variant="contained"
              type="submit"
              fullWidth
              color="primary"
              className={classes.submit}
            >
              Sign In
            </Button>
          </form>
          <Button
            variant="contained"
            type="submit"
            fullWidth
            color="secondary"
            className={classes.submit}
            onClick={handleClick}
          >
            Switch to Sign up
          </Button>
        </Paper>
      ) : (
        <Paper
          className={classes.paper}
          style={{ background: isDarkMode ? '#2E3B55' : 'white' }}
        >
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon color="primary" />
          </Avatar>
          <Typography variant="h5">Sign Up</Typography>
          <form
            className={classes.form}
            onSubmit={authSubmitHandler}
          >
            <FormControl
              margin="normal"
              required
              fullWidth
            >
              <InputLabel htmlFor="username">Username</InputLabel>
              <Input
                id="username2"
                name="username"
                value={usernameValue}
                onChange={handleUsernameChange}
                autoFocus
              />
            </FormControl>
            <FormControl
              margin="normal"
              required
              fullWidth
            >
              <InputLabel htmlFor="password">Password</InputLabel>
              <Input
                id="password"
                name="password"
                type="password"
                value={passwordValue}
                onChange={handlePasswordChange}
                autoFocus
              />
            </FormControl>

            <Button
              variant="contained"
              type="submit"
              fullWidth
              color="primary"
              className={classes.submit}
            >
              Sign Up
            </Button>
          </form>
          <Button
            variant="contained"
            type="submit"
            fullWidth
            color="secondary"
            className={classes.submit}
            onClick={handleClick}
          >
            Switch to Sign In
          </Button>
        </Paper>
      )}
    </main>
  );
}

// class Form extends Component {
//   static contextType = LanguageContext;
//   render() {

//     return (

//     );
//   }
// }

export default withStyles(styles)(Form);

这是我的登录上下文:

import React, { createContext, useState } from 'react';

export const LoggedInContext = createContext();

export function LoggedInProvider(props) {
  const [loggedIn, setLoggedIn] = useState(false);
  const changeLogIn = (val) => {
    setLoggedIn(val);
  };
  return (
    <LoggedInContext.Provider value={{ loggedIn, changeLogIn }}>
      {props.children}
    </LoggedInContext.Provider>
  );
}

Answer 1

在您的 LoggedInProvider 组件中，您可以执行以下操作:

import { useHistory } from "react-router-dom";
import React, { createContext, useState } from "react";

export const LoggedInContext = createContext();

export function LoggedInProvider(props) {
  const history = useHistory();
  const [loggedIn, setLoggedIn] = useState(false);

  const changeLogIn = (val) => {
    setLoggedIn(val);
    if(val) NavigateAway('/items');
  };

  const NavigateAway = path => {
   history.push(path);
  }

  return (
    <LoggedInContext.Provider value={{ loggedIn, changeLogIn }}>
      {props.children}
    </LoggedInContext.Provider>
  );
}

希望这项工作适合您。