React: How to route correctly on form submission?

Question

I have a one form app that is comprised of:

1. NavBar component
2. Form component (containing form fields)
3. Checkbox component (terms and conditions)
4. SubmitButton component
5. ThankYouPage component

Components 1-4 are initially showing on the screen when the user is filling out the form. When the user clicks the submit button I want him or her to be routed to the Thank You page. After watching a tutorial and adding a route, the only thing that happens when the user clicks the submit the ThankYouPage component text appears below the form. I want all the other components to disappear and the only thing left being the ThankYouPage compenent. Can someone tell me what I am doing wrong?

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

You can think of Route as the component that renders the said component in it's place when the route matches.

So, when you have:

<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>

it means, that the top part inside Container is fixed, whichever route you go to.

Instead what you need is to render the Container inside a route so that it goes away when route changes. Something like:

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

When submitting a form, there are probably validations to perform. So the best way would be navigate programmatically.

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>
  );
}

More info on Programmatic Navigation

Regarding your sending emails from client side, Don't. The password is accessible for everyone accessing your site. Write a server side script or use a mailto link