How to give props from one page to another with react Router

Question

I have a problem: I have two pages, one named /login and the other one is called /app. My problem is that I don't know how to pass props from /login to /app. In /app I want to show the person who logged in a welcome message with his name like: "Welcome Kazim". Hope you guys can help me. There is no problem to link from /login to /app but the props won't get passed.

import React, { useState } from "react";
import { Link, useHistory  } from 'react-router-dom';
import axios from 'axios';

import "./SignIn.css";

import Logo from '../../images/logo.PNG';


function SignIn() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [validationWrong, setValidationWrong] = useState(true);
    //eslint-disable-next-line
    const [validationNoExist, setValidationNoExist] = useState(true);

    const history = useHistory();
    const test2 = {
        pathname: '/app',
        state: { email: 'irgendwas@web.de',
                 name: "horst" }
      };
    
    /* Wird an das Backend geschickt und wir erhalten eine Antwort */
     const handleLogin = () => {
        axios.post('https://localhost.../', {"email":email, "password":password})
          .then(res => {
            console.log(res);
            console.log(res.data);
            console.log(res.status);
            if(res.status === 200) {
              console.log("Willkommen")
              setValidationWrong(true);
              setValidationNoExist(true);
               history.push(test2)
            }
            else if(res.status === 203) {
              setValidationWrong(false);
            }
             else if(res.status === 204) {
                setValidationNoExist(false);
              }
          })
          .catch(error => {
            console.log(error)
            setValidationNoExist(false);
        })
       };

     //const handleLogin2 = useCallback(() => {history.push('/sample')}, [history]);
      
    return (
      <div className="SignIn">
        <div className="container" id="container">
            <div className="form-container sign-in-container">
                <form>
                <div className="Logo"><img src={Logo} alt="Logo" /></div>
                <h2>Entdecke neue Freunde</h2>
                <input type="email"  className={(validationWrong && validationNoExist) ? 'input-form' : 'input-form-validation-wrong'} onChange={event => setEmail(event.target.value)} placeholder="E-Mail" />
                <input type="password" id="password" className={(validationWrong && validationNoExist) ? 'input-form' : 'input-form-validation-wrong'} onChange={event => setPassword(event.target.value)} placeholder="Passwort" />
                {validationWrong === false &&
                    <p className='validation-wrong'>E-Mail oder Passwort ist falsch</p>
                }
                {validationNoExist === false &&
                    <p className='validation-wrong'>Diese E-Mail existiert nicht</p>
                }
                    <div className='optional-buttons'>
                        <input id="input-remain" type="checkbox" className="input-remain" /><label for="input-remain">Angemeldet bleiben</label>
                        <a className="password-forgot" href="/">Passwort vergessen?</a>
                    </div>
                    <div className='buttons-container'>
                        <Link>
                            <button className="button-login" type="button" onClick={handleLogin}>Anmelden</button>
                        </Link>
                        <Link to="/registrieren" >
                            <button className="button-registration" type="button">Registrieren</button>
                        </Link>
                    </div>
                </form>
            </div>
        <div className="overlay-container">
        <div className="overlay">
            <div className="overlay-panel overlay-right">
            </div>
        </div>
    </div>
</div>
      </div>
    );
  }

export default SignIn;

Here is the Chat.js

import React from "react";
import '../components/testchat/Testchat'
import Testchat from "../components/testchat/Testchat";

function Chat(props) {

return (
    <div>
        <h1>Willkommen {props.name}</h1>
        <Testchat></Testchat>
    </div>
);
}

Answer 1

Given route push with state:

history.push({
  pathname: '/app',
  state: {
    email: 'irgendwas@web.de',
    name: "horst",
  },
})

You can access the route state on the location object on the receiving route. You can access the location object via the useLocation React hook.

function Chat(props) {
  const { state } = useLocation();

  const { name } = state;

  return (
    <div>
        <h1>Willkommen {name}</h1>
        <Testchat></Testchat>
    </div>
  );
}