Question

我有一个问题：我有两个页面，一个名为 /login，另一个名为 /app。我的问题是我不知道如何将道具从 /login 传递到 /app。在 /app 中，我想向登录欢迎消息的人显示他的名字，例如：“欢迎卡齐姆”。希望你们能帮帮我。从 /login 链接到 /app 没有问题，但道具不会通过。

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;

这里是 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

给定带有状态的路由推送：

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

您可以在接收路由的 location 对象上访问路由状态。您可以通过 useLocation React hook 访问 location 对象。

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

  const { name } = state;

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

如何使用反应路由器将道具从一页提供到另一页

1 个答案: