Reactjs 使用react路由器将表单数据从一个组件发送到另一个组件

我有一个简单的表单，其中用户插入他的信息，我想将他的信息发送到另一个组件，我通过路由器链接导航到该组件

FormulairePlayer.js

import React from 'react';
import { Button, Form, Col } from 'react-bootstrap';
import { Link } from 'react-router-dom';

export default class FormulairePlayer extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            Age:'',
            Sexe:'Homme',
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleChange(event) {
        this.setState({[event.target.name]: event.target.value});
      }

    handleSubmit(event) {
        alert("L'utilisateur a était soumis " + this.state.value);
        event.preventDefault();
      }

    render() {
        return (
            <div>  
                <Form>
                    <Form.Group as={Col} controlId="formAge">
                        <Form.Label>Age</Form.Label>
                        <Form.Control type="number" name="Age" value={this.state.Age} onChange={this.handleChange} placeholder="Age" required="true" />
                    </Form.Group>

                    <Form.Group as={Col} controlId="formSexe">
                        <Form.Label>Sexe</Form.Label>
                        <Form.Control name="Sexe" as="select" value={this.state.Sexe} onChange={this.handleChange} >
                            <option selected value="Homme">Homme</option>
                            <option value ="Femme">Femme</option>
                        </Form.Control>
                    </Form.Group>

                    <Link to="/StartGame">
                        <Button variant="primary" type="submit" onClick={this.handleSubmit}>
                            Suivant
                    </Button>
                    </Link>
                </Form>

            </div>

        );
    }
}

从“React”导入React；
从“react bootstrap”导入{Button，Form，Col}；
从'react router dom'导入{Link}；
导出默认类FormulairePlayer扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
年龄：''，
性：'人'，
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）；
}
handleSubmit（事件）{
警报（“L'Usilisateur aétait soumis”+此.state.value）；
event.preventDefault（）；
}
render（）{
返回(
年龄
性感
霍姆
女性
苏万特
);
}
}

有没有办法使用路由器链接或我应该使用另一种方法？

在组件之间导航时，您可以使用

组件作为道具发送数据

更新：

---

我如何检索新组件内的数据？您可以通过

this.props.location.state

在导航组件中访问此道具@AnisKaloun？谢谢，它刚刚起作用，变量名有问题！我现在的表单有一个小问题，我的表单不再检查是否已填写，它只是将我发送到下一个组件？有办法解决这个问题吗？谢谢

handleSubmitEvent(event) {
  alert("L'utilisateur a était soumis " + this.state.value);
  event.preventDefault();
  return (
  <Redirect
    to={{
      pathname: `/StartGame`,
      state: { age: this.state.age, sex: this.state.sex },
    }}
  />)
}

<Button variant="primary" type="submit" onClick={this.handleSubmit}>
  Suivant
</Button>;

componentDidMount(){
console.log(this.props.location.state)
}