Блог

По какой-то причине, нажав кнопку «Отправить» в форме входа в мой учебник по реагированию, URL-адрес изменяется с domain.com/login чтобы domain.com/login?email=max@test.comamp;password=admin123 введите поле электронной почты и пароля в URL-адрес.

Пример инструктора, похоже, этого не делает.

 LoginScreen.js

import { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { loginAction } from '../state/actions/userActions'


const LoginScreen = () => {
    const [email, setEmail] = useState('')
    const [password, setPW] = useState('')
    const location = useLocation()
    const dispatch = useDispatch()

    const submitLoginHandler = (e) => {
        e.preventDefault()
        dispatch(loginAction(email, password))
    }

    return (
        <div className="full-container w-full">
            <div className="login-content-container max-w-5xl mx-auto p-16 my-8">
                <div className="login-container flex items-center bg-white shadow-2xl rounded-md overflow-hidden">
                    <div className="form-container rounded-md p-8 my-16">
                        <h2 className="my-1 font-medium text-center text-2xl">sevenTwigs</h2>
                        <span className="mb-8 block text-center font-light text-md">Account Login</span>
                        <form className="login-form p-4">
                            <div className="input-group flex flex-col items-center">
                                <input 
                                    className="email-input border-2 border-gray-200 placeholder-gray-400 rounded-md px-4 py-2 m-2 w-full text-sm font-light" 
                                    type="email" 
                                    name="email" 
                                    placeholder="Enter your email"  
                                    value={email} 
                                    onChange={(e) => setEmail(e.target.value)} />    
                                <input 
                                    className="password-input border-2 border-gray-200 placeholder-gray-400 rounded-md px-4 py-2 m-2 w-full text-sm font-light" 
                                    type="password" 
                                    name="password" 
                                    placeholder="Your password"
                                    value={password} 
                                    onChange={(e) => setPW(e.target.value)} />    
                                <button
                                    type="submit" 
                                    className="w-full rounded-sm px-4 py-2 bg-pink-400 hover:bg-pink-300 hover:shadow-md disabled:bg-gray-400 
                                    text-white shadow-sm text-center text-sm my-4"
                                    value="submit" 
                                    onClick={(e) => submitLoginHandler(e)} >
                                    LOG IN
                                </button>
                            </div>
                        </form>
                        <div className="new-user-register text-sm text-center text-gray-400">
                            Don't have an account? 
                            <Link to="/register/" className="text-gray-500"> Register</Link>
                        </div>
                    </div>
                    <div className="form-splash-image bg-black w-2/3 hidden md:flex">
                        <img src="/images/wallpainting.jpg" alt="" />
                    </div>
                </div>   
            </div>
        </div>
    )
}

export default LoginScreen
 

 app.js
import {BrowserRouter as Router, Route } from 'react-router-dom'
import Header from './components/Header'
import Footer from './components/Footer'
import HomeScreen from './screens/HomeScreen'
import ProductScreen from './screens/ProductScreen'
import CartScreen from './screens/CartScreen'
import CheckoutScreen from './screens/CheckoutScreen'
import LoginScreen from './screens/LoginScreen'

function App() {
  return (
      <Router>
        <Header />
        <div className="main-content h-full min-h-screen flex" style={{backgroundColor: '#f5fcf7'}}>
          <Route path="/" component={HomeScreen} exact />
          <Route path="/products/:id" component={ProductScreen}  />
          <Route path="/cart" component={CartScreen} />
          <Route path="/checkout" component={CheckoutScreen} />
          <Route path="/login" component={LoginScreen} />
        </div>
        <Footer />
      </Router>
  );
}

export default App;
 

Внутренние Экспресс-Маршруты

 const express = require('express')
const router = express.Router()
const { userAuth, registerUser, retrieveProfile } = require('../controller/userController')
const { protect } = require('../middleware/authTokenMW')


router.post('/login', userAuth)
router.post('/register', registerUser)
router.route('/profile')
    .get(protect, retrieveProfile)


module.exports = router
 

 server.js
const express = require('express')
const dotenv = require('dotenv')
const mongoose = require('mongoose')
const connectDB = require('./config/db')
const products = require ('./data/products')
const productRoutes = require('./routes/productRoutes')
const userRoutes = require('./routes/userRoutes')
const { notFound, errorHandler } = require('./middleware/errorHandlerMW')

const app = express()
dotenv.config()
connectDB()
app.use(express.json())

// Start Server
app.listen(5000, () =>{
    console.log('Server started')
})

// Route for Products
app.use('/api/products', productRoutes)

// Route for Users
app.use('/api/users/', userRoutes)


// Error Handlers
app.use(notFound)
app.use(errorHandler)
 

По умолчанию ли ввод значений текстовых полей в строки запроса в URL-адресе выполняется командой React on? Или я что-то нечаянно испортил?

Ваша кнопка имеет тип отправить, и вы не указали никаких свойств для формы. Поэтому по умолчанию он будет предполагать несколько вещей,

метод=»Получить» и действие=»Ваш URL»

Таким образом, он добавляет все параметры в ваш URL-адрес в качестве параметров строки запроса.

И добавление события отправки в форму решит проблему, как у вас e.preventDefault там.

Если вы передадите событие в качестве параметра при вызове функции, функция e.preventDefault() не будет работать.

Попробуйте использовать только

 onClick={submitLoginHandler}
 

вместо

 onClick={(e) => submitLoginHandler(e)}