Reactjs 如何将用户名传递给同级组件？

我已经在我获取学生信息的应用程序的第一页创建了一个学生反馈应用程序，在学生成功提交表单中的所有详细信息后，用户将被重定向到反馈页面，在反馈页面中，他们将获得一些选择题，然后是更多的问题（几个问题以获得更好的响应）。在这些步骤之后，用户将收到一条感谢信息，感谢他们的反馈，用户的名字应该是他们在第一个表单中输入的名字

here is my Student Feedback code.

import React, { Component } from 'react';
import { Button, Container, Form, Row } from 'react-bootstrap';
import vector from '../../images/01.png';
import Navbar from '../layout/Navbar';
import { connect } from "react-redux";
import { createStudent } from '../../store/actions/studentActions';
import ThankYou from './ThankYou';

const validIDRegex = RegExp(/^[A-Z][A-Z]\/[A-Z][A-Z]\/[A-Z][A-Z]\/[\d]{2}-[\d]{2}\/[\d]{2}$/i);

const validEmailRegex = RegExp(
  /^((?!\.)[\w-_.]*[^.])(@\w+)(\.\w+(\.\w+)?[^.\W])$/gm
);
const validPhoneRegex = RegExp(/^\d{10}$/);
const validStringRegex = RegExp(/\d/);

class StudentDetails extends Component{
    constructor() {
        super();
        this.state = {
            id: "",
        course: "",
        name: "",
        phone:"",
        email: "",
        errors: {
         id: "",
        course: "",
        name: "",
        phone:"",
        email: "",
      }
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleChange = (event) => {
        event.preventDefault();
        this.setState(
            {
                [event.target.name]: event.target.value,
            }
        );
        let { name, value } = event.target;
        let errors = this.state.errors;

        switch (name) {
            case 'id':
                errors.id =
                    // value.length < 17
                    validIDRegex.test(value)
                        ? ''
                        : 'Invalid ID';
                break;
            case 'course':
                errors.course =
                    validStringRegex.test(value)
                        ? 'Invalid Course'
                        : '';
                break;
            case 'name':
                errors.name =
                    validStringRegex.test(value)
                        ? 'Invalid Name'
                        : '';
                break;
            case 'phone':
                errors.phone =
                    validPhoneRegex.test(value)
                        ? ''
                        : 'Invalid Phone No.';
                break;
            case 'email':
                errors.email =
                    validEmailRegex.test(value)
                        ? ''
                        : 'Invalid Email';
                break;
            default:
                break;
        }
    }



    handleSubmit(e) {
        e.preventDefault();
        let errors = this.state.errors;
        console.log(this.state);
        if (errors.id === "") {
            if (errors.name === "") {
                if (errors.course === "") {
                    if ( errors.phone === "" ) {
                        if (errors.email === "") {                            
                            this.props.createStudent(this.state);
                            this.props.history.push("/feedback");
                        }
                    }
                }
            }
        }
    }

     componentDidMount(){
        this.nameInput.focus();
    }
    render() {
        const {errors} = this.state;
        return (
        <>
        <Navbar />
        <Container fluid className="body-bg">
            <Row className="row">
                    <div className="center">
                        <h4 className="heading">Lets Make Our Training Better</h4>
                        <p>Be Expressive, Be Honest</p>
                    </div>
                <Container>
                   <section className="main" sm={12}>
                    <div className="form_div" sm={12} md={8}>
                        <Form onSubmit={this.handleSubmit} id="myForm">
                             <div className="form-group">
                                <div className="error-div">
                                <label className="label">Your Student ID</label>
                                {errors.id.length > 0 && 
                                    <span className='error'>{errors.id}</span>}
                               </div>
                                <input type="text" maxLength="17" name="id" ref={(input) => { this.nameInput = input; }}  value={this.state.id} onChange={this.handleChange} className="form-control" placeholder="AD/RH/WM/08-19/27" required/>
                                <p>You can check this on your i-card or contact us please.</p>
                            </div>
                            <div className="form-group">                                
                                <div className="error-div">
                                    <label className="label">Your Course</label>
                                    {errors.course.length > 0 && 
                                    <span className='error'>{errors.course}</span>}
                                </div>
                                <input type="text"  className="form-control" name="course" value={this.state.course} onChange={this.handleChange} required/>
                            </div>
                            <div className="form-group">                                
                                <div className="error-div">
                                    <label className="label">Your Name</label>
                                    {errors.name.length > 0 && 
                                    <span className='error'>{errors.name}</span>}
                                </div>
                                <input type="text"  className="form-control" name="name" value={this.state.name} onChange={this.handleChange} required/>
                            </div>
                            <div className="form-group">                                
                                <div className="error-div">
                                    <label className="label">Your Mobile No.</label>
                                    {errors.phone.length > 0 && 
                                    <span className='error'>{errors.phone}</span>}
                                </div>
                                <input type="text" maxLength="10" className="form-control" name="phone" value={this.state.phone} onChange={this.handleChange} required/>
                            </div>
                             <div className="form-group">
                                <div className="error-div">
                                    <label className="label">Your Email Address</label>
                                    {errors.email.length > 0 && 
                                    <span className='error'>{errors.email}</span>}
                                </div>
                                <input type="email"  className="form-control" name="email" value={this.state.email} onChange={this.handleChange} required/>
                                </div>
                            <div className="btn-grp">
                                <Button type="reset" className="warning" variant="warning" >Reset</Button>
                                <Button variant="primary" type="submit">Next</Button>
                            </div>
                  
                        </Form>
                        </div>
                        <div className="vector" sm={12} md={4}>
                            <img src={vector} alt="vector"/>
                        </div>
                </section>
               </Container>
            </Row>
        </Container>
    </>
    );
    }
}

const mapStateToProps = (state) => {
    return { auth: state.firebase.auth };
};

const mapDispatchToProps = (dispatch) => {
    return {
        createStudent: (student) => {
            dispatch(createStudent(student));
        },
    };
};
export default connect(mapStateToProps,mapDispatchToProps)(StudentDetails);

And inside the ThankYou page i am trying to get the username which was supposed to be entered by user. And because i am not using login system inside my feedback app, so how can i apply auth guards to my application?

import React from 'react';
import { Link } from "react-router-dom";
import Navbar from '../layout/Navbar';

const ThankYou = (props) => {
    return (
        <>
            <Navbar/>
            <div className="center thankyou-div">
                <h1 className="heading">ThankYou</h1>
                <h3><strong><span className="text-warning">{props.userName}</span> for your valuable feedback</strong></h3>
                <p className="feedback-link"><Link to="/">Go to Feedback again</Link></p>
            </div>
        </>
    );
}

export default ThankYou;

这是我的学生反馈代码。
从“React”导入React，{Component}；
从“react bootstrap”导入{按钮、容器、表单、行}；
从“../../images/01.png”导入向量；
从“../layout/Navbar”导入导航栏；
从“react redux”导入{connect}；
从“../../store/actions/studentActions”导入{createStudent}；
从“/ThankYou”导入ThankYou；
const validregex=RegExp（/^[A-Z][A-Z]\/[A-Z][A-Z]\/[A-Z][A-Z]\/[\d]{2}-[\d]{2}\/[\d]{2}$/i）；
常量validEmailRegex=RegExp(
/^（（？！\）[\w-.]*[^.]）（@\w+（\。\w+）（\。\w+）[^.\w]）$/gm
);
const validPhoneRegex=RegExp（/^\d{10}$/）；
常量validStringRegex=RegExp（/\d/）；
类StudentDetails扩展组件{
构造函数（）{
超级（）；
此.state={
id:“”，
课程：“，
姓名：“，
电话：“，
电邮：“，
错误：{
id:“”，
课程：“，
姓名：“，
电话：“，
电邮：“，
}
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleChange=（事件）=>{
event.preventDefault（）；
这是我的国家(
{
[event.target.name]：event.target.value，
}
);
让{name，value}=event.target；
让errors=this.state.errors；
交换机（名称）{
案件编号：
errors.id=
//值。长度<17
ValidRegex.测试（值）
? ''
：“无效ID”；
打破
“课程”案例：
错误，当然=
validStringRegex.测试（值）
“无效课程”
: '';
打破
案例“名称”：
errors.name=
validStringRegex.测试（值）
？“无效名称”
: '';
打破
“电话”案例：
错误。电话=
有效电话率测试（值）
? ''
：'无效的电话号码'；
打破
“电子邮件”案例：
错误。电子邮件=
validEmailRegex.测试（值）
? ''
：“无效电子邮件”；
打破
违约：
打破
}
}
handleSubmit（e）{
e、 预防默认值（）；
让errors=this.state.errors；
console.log（this.state）；
如果（errors.id==“”）{
如果（errors.name==“”）{
如果（errors.course==“”）{
如果（errors.phone==“”）{
如果（errors.email==“”）{
this.props.createStudent（this.state）；
this.props.history.push（“/反馈”）；
}
}
}
}
}
}
componentDidMount（）{
this.nameInput.focus（）；
}
render（）{
const{errors}=this.state；
返回(
让我们的训练更好
要有表现力，要诚实

你的学生证
{errors.id.length>0&&
{errors.id}
{this.nameInput=input；}}value={this.state.id}onChange={this.handleChange}className=“表单控制”占位符=“AD/RH/WM/08-19/27”必填项/>
您可以在i-card上查看此信息，或与我们联系

你的课程
{errors.course.length>0&&
{errors.course}
你的名字
{errors.name.length>0&&
{errors.name}
你的手机号码。
{errors.phone.length>0&&
{errors.phone}
你的电子邮件地址
{errors.email.length>0&&
{errors.email}
this.props.history.push({
  pathname: '/feedback',
  state: { userName: this.state.name }
})

const ThankYou = (props) => {
    return (
        <>
            <Navbar/>
            <div className="center thankyou-div">
                <h1 className="heading">ThankYou</h1>
                <h3><strong><span className="text-warning"> {props.location.state.userName}</span> for your valuable feedback</strong></h3>
                <p className="feedback-link"><Link to="/">Go to Feedback again</Link></p>
            </div>
        </>
    );
}