Почему состояние моего компонента React отображается в моем URL?

Question

У меня есть компонент входа в мое приложение cra, и мое состояние отображается в моем URL, как в dev, так и в рабочей среде. Я заменил электронное письмо на {email}.

http://localhost: 3000 /? User = {email} & пароль = пароль

Понятия не имею, почему это это происходит. У меня есть несколько других компонентов, ни один из которых не демонстрирует такое же поведение. Я также подтвердил, что это исходит от компонента реакции, а не от какой-либо обработки маршрута (я переименовал состояние, а URL-адрес изменился в натуральной форме).

Как это исправить?

import React from 'react';
import '../../App.css';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import LoginButton from './LoginButton';

class Card extends React.Component {

    constructor(props) {
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    state = {
        user: "",
        password: ""
      };

    handleInputChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
            [name]: value
        });
    }

    onSubmit(){
        this.props.login(this.state.user, this.state.password);
    }

    render(){
        return (
            <div style={styles.container}>
                <form style={styles.form}>
                <div style={styles.formContainer}>
                    <div style={styles.block}>
                        <div style={{display: 'flex', flexDirection: 'row'}}>
                            <i class="fas fa-user-circle" style={styles.iconPosition}></i>
                            <div style={{display: 'flex', flexDirection: 'column', flex: 5}}>
                                <div style={{display: 'flex', alignItems: 'start', marginBottom: '15px', fontFamily: 'Ubuntu', fontSize: '14pt'}}>
                                    EMAIL
                                </div>
                                <input 
                                type="text" 
                                name="user"
                                value={this.state.user}
                                onChange={this.handleInputChange} 
                                placeholder='john.snow@solidcad.ca'
                                style={{fontFamily: 'Ubuntu', fontSize: '10px', border: 'none'}}
                                /> 
                            </div>
                        </div>
                    </div>

                    <div style={styles.block}>
                        <div style={{display: 'flex', flexDirection: 'row'}}>
                            <i class="fas fa-unlock-alt" style={styles.iconPosition}></i>
                            <div style={{display: 'flex', flexDirection: 'column', flex: 5}}>
                                <div style={{display: 'flex', alignItems: 'start', marginBottom: '15px', fontFamily: 'Ubuntu', fontSize: '14pt'}}>
                                    PASSWORD
                                </div>
                                <input 
                                    type="password" 
                                    name="password" 
                                    value={this.state.password}
                                    onChange={this.handleInputChange}
                                    placeholder='*****'
                                    style={{fontFamily: 'Ubuntu', fontSize: '10px', border: 'none'}}
                                />
                            </div>
                        </div>
                    </div>

                    <LoginButton label='LOGIN' onClick={this.onSubmit}/>
                </div>

              </form>
            </div>
        );
    }
}

export default connect(null, actions)(Card);

Это компонент приложения, который содержит экран входа и логин:

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import './App.css';
import Configurator from './components/Configurator';
import LoginScreen from './components/Login/LoginScreen';
import * as actions from './actions';

const Dashboard = () => <h2>Dashboard</h2>

class App extends Component {

  componentDidMount(){
    this.props.fetchUser();
  }

  renderContent() {
      switch (this.props.auth) {
        case null:
          return <LoginScreen />;
        default:
          return (
            <BrowserRouter>
                  <Route exact path="/" component={Configurator}/>
                  {/* <Route path="/dashboard/" component={Dashboard}/>    */}
            </BrowserRouter>
          )
      }
  }

  render() {
    return (
      <div className="App" style={styles.container}>
        {this.renderContent()}
      </div>
    );
  };
}

function mapStateToProps({ auth, desAut }) {
  return { auth, desAut };
}

export default connect(mapStateToProps, actions)(App);

Заранее спасибо за помощь!

Answer 1

preventDefault - это то, что вы ищете, вы можете изменить тип кнопки для отправки в компоненте LoginButton, например <input type="submit" value="Login"/>, а затем

<form 
  style={styles.form} 
  onSubmit={(e) => { 
   e.preventDefault();
   this.onSubmit(); 
  }}
>

Answer 2

Вы должны предоставить обработчик onSubmit на вашем form, например:

<form onSubmit={(event) => {
  event.preventDefault();
  ...process form data...
  }>
  ...
</form>