Reactjs 在父组件和子组件之间进行路由器通信

我的父组件：

class Main extends Component {
    constructor(props) {
        super(props);

        this.state = {
            docked: false,
            open: false,
            transitions: true,
            touch: true,
            shadow: true,
            pullRight: false,
            touchHandleWidth: 20,
            dragToggleDistance: 30,
            currentUser: {}
        };

        this.renderPropCheckbox = this.renderPropCheckbox.bind(this);
        this.renderPropNumber = this.renderPropNumber.bind(this);
        this.onSetOpen = this.onSetOpen.bind(this);
        this.menuButtonClick = this.menuButtonClick.bind(this);
        this.updateUserData = this.updateUserData.bind(this);
    }
updateUserData(user){
        this.setState({
            currentUser: user
        })
    }
    render() { 
            return (
                <BrowserRouter>
                    <div style={styles.content}>
                        <div className="content">
                            <Switch>

                                    <Route path="/login/:code/:state" component={Login} updateUserData = {this.updateUserData}/>
                                    <Route path="/dashboard" component={Login}/>
                            </Switch>
                        </div>
                    </div>
                </BrowserRouter>
            )
        }

    }

class Login extends Component{
    constructor(props) {
        super(props);
        this.state = {
            linkedInUrl: ''
        };
    }
    componentWillMount(){
        const query = new URLSearchParams(this.props.location.search);

        if(query.get('code') && query.get('state')){
            const code = query.get('code');
            axios.post(Globals.API + '/user/saveUser', {
                code: code,
            })
                .then((response) => {
                    if(response.data.success == true){
                        this.props.updateUserData(response.data.user);
                    }
                })
                .catch((error) => {
                    console.log(error);
                })
        }

    }
render() {
        const { linkedInUrl } = this.state;
        return (
            <div className="panel center-block" style={styles.panel}>
                <div className="text-center">
                    <img src="/images/logo.png" alt="logo" style={styles.logo}/>
                </div>
                <div className="panel-body">
                    <a href={linkedInUrl} className="btn btn-block btn-social btn-linkedin">
                        <span className="fa fa-linkedin"></span>
                        Sign in with LinkedIn
                    </a>
                </div>
                <div className="panel-footer">

                </div>
            </div>
        )
    }

类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
停靠：错误，
开：错，
转变：是的，
触摸：是的，
影子：没错，
普鲁特：错，
touchHandleWidth:20，
牵引距离：30，
当前用户：{}
};
this.renderPropCheckbox=this.renderPropCheckbox.bind（this）；
this.renderPropNumber=this.renderPropNumber.bind（this）；
this.onSetOpen=this.onSetOpen.bind（this）；
this.menuButtonClick=this.menuButtonClick.bind（this）；
this.updateUserData=this.updateUserData.bind（this）；
}
updateUserData（用户）{
这是我的国家({
当前用户：用户
})
}
render（）{
返回(
)
}
}

我的孩子（登录）组件：

class Main extends Component {
    constructor(props) {
        super(props);

        this.state = {
            docked: false,
            open: false,
            transitions: true,
            touch: true,
            shadow: true,
            pullRight: false,
            touchHandleWidth: 20,
            dragToggleDistance: 30,
            currentUser: {}
        };

        this.renderPropCheckbox = this.renderPropCheckbox.bind(this);
        this.renderPropNumber = this.renderPropNumber.bind(this);
        this.onSetOpen = this.onSetOpen.bind(this);
        this.menuButtonClick = this.menuButtonClick.bind(this);
        this.updateUserData = this.updateUserData.bind(this);
    }
updateUserData(user){
        this.setState({
            currentUser: user
        })
    }
    render() { 
            return (
                <BrowserRouter>
                    <div style={styles.content}>
                        <div className="content">
                            <Switch>

                                    <Route path="/login/:code/:state" component={Login} updateUserData = {this.updateUserData}/>
                                    <Route path="/dashboard" component={Login}/>
                            </Switch>
                        </div>
                    </div>
                </BrowserRouter>
            )
        }

    }

class Login extends Component{
    constructor(props) {
        super(props);
        this.state = {
            linkedInUrl: ''
        };
    }
    componentWillMount(){
        const query = new URLSearchParams(this.props.location.search);

        if(query.get('code') && query.get('state')){
            const code = query.get('code');
            axios.post(Globals.API + '/user/saveUser', {
                code: code,
            })
                .then((response) => {
                    if(response.data.success == true){
                        this.props.updateUserData(response.data.user);
                    }
                })
                .catch((error) => {
                    console.log(error);
                })
        }

    }
render() {
        const { linkedInUrl } = this.state;
        return (
            <div className="panel center-block" style={styles.panel}>
                <div className="text-center">
                    <img src="/images/logo.png" alt="logo" style={styles.logo}/>
                </div>
                <div className="panel-body">
                    <a href={linkedInUrl} className="btn btn-block btn-social btn-linkedin">
                        <span className="fa fa-linkedin"></span>
                        Sign in with LinkedIn
                    </a>
                </div>
                <div className="panel-footer">

                </div>
            </div>
        )
    }

类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
linkedInUrl:'
};
}
组件willmount（）{
const query=newURLSearchParams（this.props.location.search）；
if（query.get（'code'）&&query.get（'state'））{
const code=query.get（'code'）；
axios.post（Globals.API+'/user/saveUser',{
代码：代码，
})
。然后（（响应）=>{
if（response.data.success==true）{
this.props.updateUserData（response.data.user）；
}
})
.catch（（错误）=>{
console.log（错误）；
})
}
}
render（）{
const{linkedInUrl}=this.state；
返回(
)
}

---

当我在

Login

组件中得到响应时，我正在尝试从

Main

组件更新currentUser对象，并且还能够从

Main

的所有子组件中访问

currentUser

对象（基本上是从我的整个应用程序）但是

this.props

在

Login

组件中是空的，我不能

this.props.updateUserData（response.data.user）

也可以。有人能告诉我为什么吗？谢谢大家花时间！

因为你没有将任何

道具

传递给

登录

组件。所以要让它工作，你不应该在

路由
组件上使用
道具。你应该使用
渲染
道具，它需要一个retURN组件或jsx并不重要。有关
Route
组件的详细信息，您可以找到

所以换掉这条路线

<Route
  path="/login/:code/:state"
  component={Login}
  updateUserData = {this.updateUserData}
/>


更多示例是如何使用react router将道具传递到
路由
组件

希望它能有所帮助
@我应该如何通过它？你能给我举个例子吗？我已经尝试过这样：}/>和这样：}updateUserData={this.updateUserData/>但在登录组件中，我无法访问updateUserData，也没有收到props中的currentUser。@Alphonse我更新了我的答案。只要用props复制并粘贴我的路线就可以了。我已经粘贴了。很遗憾，在登录中，this.props仍然是空的，我在控制台中得到了这个错误。props.updateUserData不是一个函数