Реагируйте: Как правильно маршрутизировать при отправке формы?

Question

У меня есть одно приложение формы, которое состоит из:

1. Компонент NavBar
2. Компонент формы (содержащий поля формы)
3. Компонент флажка (условия и положения))
4. Компонент SubmitButton
5. Компонент ThankYouPage

Компоненты 1-4 первоначально отображаются на экране, когда пользователь заполняет форму.Когда пользователь нажимает кнопку отправки, я хочу, чтобы он или она были перенаправлены на страницу благодарности.После просмотра учебника и добавления маршрута, единственное, что происходит, когда пользователь нажимает кнопку «Отправить», представляет текст компонента ThankYouPage, находящийся под формой.Я хочу, чтобы все остальные компоненты исчезли, и единственное, что осталось - это компонент ThankYouPage.Может кто-нибудь сказать мне, что я делаю неправильно?

App.js

import React from 'react';
import NavBar from './Components/NavBar'
import Form from './Components/InfoForm'
import SubmitButton from './Components/SubmitButton';
import Container from '@material-ui/core/Container';
import Checkbox from './Components/Checkbox';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';
import ThankYou from './Components/ThankYou';

function App() {

    const [state, setState] = React.useState({
        checkbox: false,
    });

    const [values, setValues] = React.useState({
        name: '',
        age: '',
        email: ''
    });

    const handleChangeForm = name => event => {
      setValues({ ...values, [name]: event.target.value });
    };

    const handleChange = event => {
      setState({ ...state, [event.target.name]: event.target.checked });
    };

    return (
        <Router>
            <div>
                 <Container maxWidth="md">
                 <NavBar />
                 <Form values={values} handleChangeForm={handleChangeForm} />
                 <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
                 <SubmitButton isEnabled={state.checkbox} values={values}/> 
                 </Container>     
            </div>
                <Route path="/thankyou" component={ThankYou} />
        </Router>
    );
}

export default App;

SubmitButton.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';


export default function ContainedButtons(props) {
  const classes = useStyles();  

  const onClickBtn = () => {

    const textBuilder = () => {
      var doc = "";
      for (const key in props.values) {
       doc += key + ": " + props.values[key] + "<br/>";      
      }
      return doc;
    } 

    window.Email.send({
      Host : "smtp.elasticemail.com",
      Username : "mine@gmail.com",
      Password : "xxxx-xxxx-xxx-xxx",
      To : 'mine@gmail.com',
      From : "mine@gmail.com",
      Subject : "New Client Info",
      Body : textBuilder()
  }).then(
    message => alert(message)
  );
  };

    return (
      <div>
        <Link to="/thankyou">
          <Button variant="contained" color="primary" className={classes.button} disabled = {!props.isEnabled} type="submit" onClick={onClickBtn}>
            Submit
          </Button>
        </Link>
      </div>
    );
}

ThankYouPage.js

import React from 'react';

function ThankYou() {
  return (
    <div>
      <h2>Thank you and get ready to become a work of art!</h2>
    </div>
  );
}

export default ThankYou;

Answer 1

Вы можете думать о Route как о компоненте, который отображает указанный компонент на своем месте, когда маршрут соответствует.

Итак, когда у вас есть:

<Router>
  <div>
     <Container maxWidth="md">
        <NavBar />
        <Form values={values} handleChangeForm={handleChangeForm} />
        <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
        <SubmitButton isEnabled={state.checkbox} values={values}/> 
     </Container>     
  </div>
  <Route path="/thankyou" component={ThankYou} />
</Router>

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

Вместо этого вам нужно визуализировать Container внутри маршрута, чтобы он исчезал при изменении маршрута. Что-то вроде:

<Router>
  <Route exact path="/" component={FormContainer} />
  <Route path="/thankyou" component={ThankYou} />
</Router>

При отправке формы, вероятно, есть проверки для выполнения. Таким образом, лучшим способом будет навигация программно.

submitForm = () => {
  // assuming this component is in a route
  const { router } = this.props'
  router.push("/thankyou");
}
render() {
  return (
    <form onSubmit={this.submitForm}>
     <button type="submit">Submit</button>
    </form>
  );
}

Подробнее о программной навигации

Что касается отправки писем со стороны клиента, Не . Пароль доступен всем, кто заходит на ваш сайт. Напишите сценарий на стороне сервера или используйте mailto link