Javascript 如何使用路由器/路由器参数在react中将数据从一个父组件传输到另一个父组件

我是一名新的应用程序开发人员，我将在这里列出我的代码，以获得解决方案。有不同的文件

现在我有一个index.html和一个app.js和index.js，还有login.js和product.js

import React from 'react';

class Product extends React.Component {
    constructor(props){
        super(props);

    }

    coalOption() {

        this.props.history.push('/coal');
    }

    componentDidMount() {
        var usname   = this.state;
        console.log('usen' , usname);
    }

    render() {
        return(
            <div className = 'container'>
                <div className = 'row'>
                    <div className = 'col-md-12'>
                    <h3>Welcome the username</h3>
                    <button className="btn btn-primary" type="button" onClick={() => this.coalOption()}>coal</button>
                    </div>
                </div>
            </div>

        )
    }
}

export default Product

我的app.js在其中实现了路由，index.js在其中实现了浏览器路由器，登录js有axios api调用和普通登录应用程序，成功登录后，我将移动到另一个页面，即product.js

import React from 'react';

class Product extends React.Component {
    constructor(props){
        super(props);

    }

    coalOption() {

        this.props.history.push('/coal');
    }

    componentDidMount() {
        var usname   = this.state;
        console.log('usen' , usname);
    }

    render() {
        return(
            <div className = 'container'>
                <div className = 'row'>
                    <div className = 'col-md-12'>
                    <h3>Welcome the username</h3>
                    <button className="btn btn-primary" type="button" onClick={() => this.coalOption()}>coal</button>
                    </div>
                </div>
            </div>

        )
    }
}

export default Product

所以列出我的文件

1） App.js

从“React”导入React；
从“react router dom”导入{交换机，路由}
从“./组件/产品”导入产品；
从“./部件/煤炭”进口煤炭；
从“./components/Summary”导入摘要；
从“./components/Login”导入登录名；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认应用程序；

2） Index.js

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter}；
导入“../node_modules/bootstrap/dist/css/bootstrap.min.css”；
导入“./index.css”；
从“./App”导入应用程序；
从“./components/Login”导入登录名；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render(
，document.getElementById（'root'）；
registerServiceWorker（）；

3） Login.js

从“React”导入React
从“axios”导入axios；
类登录扩展了React.Component{
建造师（道具）{
超级（道具）
此.state=({
管理员id:“”，
密码：“”，
});
this.handlePassword=this.handlePassword.bind（this）；
this.handleUserName=this.handleUserName.bind（this）；
this.loginUp=this.loginUp.bind（this）；
}
handleUserName（e）{
e、 预防默认值（）；
this.setState（{admin\u id:e.target.value}）
}
handlePassword（e）{
e、 预防默认值（）；
this.setState（{密码：e.target.value}）
}
componentDidMount（）{
}
loginUp（）{
让用户详细信息={
admin\u id:this.state.admin\u id，
密码：this.state.password
}
if（this.state.admin_id==''&&this.state.password===''）{
警报（“请输入字段”）；
}否则{
axios.post（“http://103.10.191.145:1337/sapl/admin/login，userDetails，this.axioconfig）
。然后（（res）=>{
如果（res.data==='管理员登录成功'）{
this.setState（{userName:userDetails.admin_id}）
this.props.history.push（'/product'）；
}否则{
警惕（“我们没有成功”）；
}
})
.catch（（错误）=>{
console.log（'axios error'，err）；
})
}
}
render（）{
返回(
登录
this.loginUp（）}>Login
)   
}
}
导出默认登录名

4） product.js

import React from 'react';

class Product extends React.Component {
    constructor(props){
        super(props);

    }

    coalOption() {

        this.props.history.push('/coal');
    }

    componentDidMount() {
        var usname   = this.state;
        console.log('usen' , usname);
    }

    render() {
        return(
            <div className = 'container'>
                <div className = 'row'>
                    <div className = 'col-md-12'>
                    <h3>Welcome the username</h3>
                    <button className="btn btn-primary" type="button" onClick={() => this.coalOption()}>coal</button>
                    </div>
                </div>
            </div>

        )
    }
}

export default Product

从“React”导入React；
类产品扩展了React.Component{
建造师（道具）{
超级（道具）；
}
煤选项（）{
this.props.history.push（'/coal'）；
}
componentDidMount（）{
var usname=this.state；
console.log（'usen'，usname）；
}
render（）{
返回(
欢迎输入用户名
this.coalOption（）}>coal
)
}
}
导出默认产品

---

因此，我想将用户名输入我的product.js，并将其打印到html标记中。请有人帮助我显示case PoC

您可以通过

历史记录传递变量。按

this.props.history.push({
 pathname: '/product',
  userDetails: userDetails,
})

并在
产品
组件中访问它们，如下所示：

this.props.location.userDetails

我希望这会很有帮助。
您可以传递带有
历史记录的变量。按

this.props.history.push({
 pathname: '/product',
  userDetails: userDetails,
})

并在
产品
组件中访问它们，如下所示：

this.props.location.userDetails

我希望这会很有帮助。
乍一看都是一样的Skyboyer：你能告诉我我的代码需要做什么更改吗？我不理解你提供的链接，我很抱歉，从手机应用程序/屏幕键盘上实现这一点真的很难。你可以告诉我文件名和更改，我会设法做到的then@MayankPurohit我在下面添加的答案乍一看是一样的Skyboyer：你能告诉我我在代码中做了什么更改吗？我不理解你提供的链接，我很抱歉，从手机应用程序/屏幕键盘上实现这一点真的很难。你可以告诉我文件名和更改，我会设法做到的then@MayankPurohit我在下面添加了一个答案：当使用道具中的历史或位置对象时，建议使用
withRouter
包装组件。您也可以将此答案标记为已接受：）Sakhi它说，当使用props中的历史或位置对象时，建议使用
withRouter
包装组件。您也可以将此答案标记为已接受：）