javascript - react.js中登录后重定向设置为true

Question

我一直在研究重定向错误一段时间。用例 = 当用户输入用户名和密码并单击登录时，它通常会对 api 进行 POST 以进行验证检查，如果验证检查返回 200，那么它将重定向到 UserContent 组件。我现在已经注释掉了验证检查，只是为了测试登录是否会重定向到 UserConent，但它不会。没有给出错误。Route 甚至在 App.js 中声明。所以 UseHistory() 应该能够访问该路由并将用户推送到组件。我做错了什么？

应用程序.js

import React, { useState } from 'react';
import { Container, Nav, Navbar } from 'react-bootstrap';
import { Link, Route, BrowserRouter as Router, Switch } from 'react-router-dom';
import ContactForm from './pages/contactPage';
import Login from './pages/loginPage';
import Footer from './components/footer';
import HomePageContent from './components/homePageContent';
import SignUpForm from './pages/signUpPage';
import { curRentState } from './assets/pageTitles';
import './components/App.css';
import UserContent from './pages/userContent';

function App() {
  //eslint-disable-next-line
  const [loggedIn, setLoggedIn] = useState(false);

  //eslint-disable-next-line
  const [currentState, setCurrentState] = useState({ ...curRentState });

  return (
    <Router>
      <Container className='p-0' fluid={true}>
        <Navbar className='border-bottom' bg='transparent' expand='lg'>
          <Navbar.Brand>RecipeHub</Navbar.Brand>
          <Navbar.Toggle className='border-0' aria-controls='navbar-toggle' />
          <Navbar.Collapse id='navbar-toggle'>
            <Nav className='ml-auto'>
              <Link className='nav-link' to='/'>
                Home
              </Link>
              <Link className='nav-link' to='/contact'>
                Contact
              </Link>
              <Link className='nav-link' to='/signup'>
                Sign Up
              </Link>
              <Link className='nav-link' to='/login'>
                Login
              </Link>
              <Link className='nav-link' to='/userContent'>
                userContent
              </Link>
            </Nav>
          </Navbar.Collapse>
        </Navbar>
        <Switch>
          <Route
            path='/'
            exact
            render={() => (
              <HomePageContent
                title={currentState.home.title}
                text={currentState.home.text}
              />
            )}
          />
          <Route path='/contact' render={() => <ContactForm />} />
          <Route
            path='/signup'
            render={() => <SignUpForm title={currentState.signup.title} />}
          />
          <Route
            path='/login'
            render={() => (
              <Login
                title={currentState.login.title}
                setLoggedIn={setLoggedIn}
                loggedIn={loggedIn}
              />
            )}
          />
          <Route path='/userContent'>
            <UserContent />
          </Route>
          <Route>
            <h1>404 Not Found</h1>
          </Route>
        </Switch>
        <Footer />
      </Container>
    </Router>
  );
}

export default App;

登录.js

import React, { useState } from 'react';
import { Route, Switch, useHistory } from 'react-router-dom';
import Container from 'react-bootstrap/Container';
import SignUpForm from './signUpPage';
// import axios from 'axios';
import UserContent from '../pages/userContent';

export default function LoginOut({ loggedIn, setLoggedIn }) {
  const history = useHistory();
  if (loggedIn) {
    setLoggedIn(false);
  }
  const initialData = { userName: '', password: '' };
  const [formData, setFormData] = useState(initialData);

  const handleChange = (event) => {
    setFormData(() => {
      return { ...formData, [event.target.name]: event.target.value };
    });
  };

  const handleSubmit = (event) => {
    //eslint-disable-next-line
    const [userName, password] = formData;
    event.preventDefault();
    // if (userName && password !== '') {
    //   axios
    //     .post('http://localhost:5000/login', {
    //       data: {
    //         userName: userName,
    //         password: password,
    //       },
    //     })
    //     .then((response) => {
    //       console.log(`statusCode: ${response.statusCode}`);
    //       console.log(response);
    //       if (response.statusCode !== 200) {
    //         alert(response.statusCode);
    //         setLoggedIn(false);
    //         history.push('/signup');
    //       } else {
    //         setLoggedIn(true);
    //         history.push('/userContent');
    //       }
    //     })
    //     .catch((error) => {
    //       console.error(error);
    //     });
    // }
    setLoggedIn(true);
    history.push('/userContent');
  };

  const handleDirect = (event) => {
    event.preventDefault();
    history.push('/signup');
  };

  return (
    <Container
      style={{
        display: 'flex',
        margin: 'auto',
        width: 'auto',
        padding: '10px',
        justifyContent: 'center',
      }}
    >
      <div
        variant='outline-dark'
        className='container w-50'
        style={{
          border: '2px solid blue',
          padding: '5px',
          boxShadow: '2px 2px grey',
        }}
      >
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <h2 className='page-title1'>Log In</h2>
        </div>
        <form onSubmit={handleSubmit}>
          <div className='mb-3'>
            <label
              htmlFor='userName'
              className='form-label'
              style={{
                color: 'black',
                display: 'flex',
                justifyContent: 'center',
              }}
            >
              Username:
            </label>
            <input
              name='userName'
              type='text'
              className='form-control'
              id='userName'
              value={formData.userName}
              onChange={handleChange}
              required
            />
          </div>
          <div className='mb-3'>
            <label
              htmlFor='password'
              className='form-label'
              style={{
                color: 'black',
                display: 'flex',
                justifyContent: 'center',
              }}
            >
              Password:
            </label>
            <input
              name='password'
              type='password'
              className='form-control'
              id='password'
              value={formData.password}
              onChange={handleChange}
              required
            />
          </div>
          <button
            type='submit'
            className='btn btn-success'
            style={{
              display: 'flex',
              justifyContent: 'center',
              margin: '10px',
            }}
          >
            Log In
          </button>
        </form>
        <button
          onClick={handleDirect}
          type='submit'
          className='btn btn-success'
          style={{ display: 'flex', justifyContent: 'center', margin: '10px' }}
        >
          Sign Up Here!
        </button>
        <Switch>
          <Route exact={true} path='/userContent'>
            <UserContent />
          </Route>
          <Route exact={true} path='/signup'>
            <SignUpForm />
          </Route>
        </Switch>
      </div>
    </Container>
  );
}

标签： javascriptreactjs

Answer 1

const { userName, password } = formData;

** formData 是一个对象，您将其解构为一个数组。所以它使用户名和密码未定义。由于这可能与您数据库中的任何记录都不匹配，因此它可能不会像您期望的那样返回状态代码 200。**