React: Passing data between components using Router in App.js(parent component)

I am trying to self-learn React using it on the front-end while using Laravel framework on the back-end. My goal at this point is to have a user Register through a form.

On the front-end, there are two component, the parent component App.js where my '/' route is loaded automatically and all the other routes are called with react router like this:

`

<BrowserRouter>
        <div>
            {this.state.data_username}
        </div>
            <Header />

            <Footer />

            <Switch>
                <Route exact path='/' component={Intro} />
                <Route path='/register' component={Register} />
                <Route path='/login' component={Login}/>
                <Route path='/userpage' component={Userpage}/>
                <Route path='/science' component={Science}/>
                <Route path='/literature' component={Literature}/>

            </Switch>


        </BrowserRouter>

`

Then there is a child component Register.js where I am making an axios post call to register the user.

Goal: When the user gets registered, I want to pass the username(which the code gets successfully since I have it showing up in console) to the parent component and then down to the Header component, so I can render it on screen.

My understanding is that I am to make a callback from the the parent component to the child, passing somehow a function or an object to the child, assign the value I need inside the children and the pass it down to the Header.

But, most of the examples I have seen don't use the react-router for handling routes; in the cases they do, I cannot replicate the render method correctly in the Route code.

Here is my code:

import React, {Component} from 'react'
                    import ReactDOM from 'react-dom'
                    import {BrowserRouter, Route, Switch } from 'react-router-dom'
                    // import {Link} from 'react-router-dom'
                    import Header from './Header'
                    import Intro from './Intro'
                    import Register from './Register'
                    import Login from './Login'
                    import Userpage from './Userpage'
                    import Footer from './Footer'
                    import Science from './Science'
                    import Literature from './Literature'




                    class App extends Component {

                        constructor(props){
                            super(props);
                            this.state={
                                data_username:'Username'
                            }

                            this.username_Callback=this.username_Callback.bind(this)



                        }

                        username_Callback(usernamecallback){
                        this.setState({data_username:usernamecallback});

                    }



                        // username_attend(){
                        //     var username=data_username;
                        // }

                    // render={props=>(<><Register {...callbackFromParents}/></>)}



                        render(){
                            return(


                                <BrowserRouter>
                                <div>
                                    {this.state.data_username}
                                </div>
                                    <Header />

                                    <Footer />

                                    <Switch>
                                        <Route exact path='/' component={Intro} />
                                        <Route path='/register' component={Register} />
                                        <Route path='/login' component={Login}/>
                                        <Route path='/userpage' component={Userpage}/>
                                        <Route path='/science' component={Science}/>
                                        <Route path='/literature' component={Literature}/>

                                    </Switch>


                                </BrowserRouter>




                                )
                        }
                    }

                    ReactDOM.render(<App />, document.getElementById('app'))

and the Register.js :

import React, {Component} from 'react'
    // import {Link} from 'react-router-dom'
    import axios from 'axios'


    class Register extends Component{
        constructor(props){
            super(props)
            this.state={
                name: '',
                email:'',
                password:'',
                errors:[]
            }

                this.handleFieldChange = this.handleFieldChange.bind(this)
            this.handleCreateNewUser = this.handleCreateNewUser.bind(this)
            this.hasErrorFor = this.hasErrorFor.bind(this)
            this.renderErrorFor = this.renderErrorFor.bind(this)


        }


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

    handleCreateNewUser(event) {
            event.preventDefault()

            const { history } = this.props

            const user = {
              name: this.state.name,
              email: this.state.email,
              password: this.state.password

            }

            axios.post('/api/register', user)
              .then(response => {
                console.log('Success',response.data.flag)
                console.log('Success',response.data.username)
                this.props.callbackFromParent(response.data.username)
                // redirect to the homepage
                history.push('/')
              })
              .catch(error => {
                this.setState({
                  errors: error.response.data.errors
                })
              })
          }




    hasErrorFor(field) {
            return !!this.state.errors[field]
          }

    renderErrorFor(field) {
        if (this.hasErrorFor(field)) {
          return (
            <span className='invalid-feedback'>
              <strong>{this.state.errors[field][0]}</strong>
            </span>
          )
        }
    }



    render(){

        return (

    <div className='container py-4'>
          <div className='row justify-content-center'>
            <div className='col-md-6'>
              <div className='card'>
                <div className='card-header'>Create new account</div>
                <div className='card-body'>

                  <form onSubmit={this.handleCreateNewUser} >

                    <div className='form-group'>
                      <label htmlFor='name'>User Name</label>
                      <input
                        id='name'
                        className={`form-control ${this.hasErrorFor('name') ? 'is-invalid' : ''}`}
                        name='name'
                        value={this.state.name}
                        onChange={this.handleFieldChange}
                      />
                    </div>

                    <div className='form-group'>
                      <label htmlFor='description'>Email</label>
                      <input
                        id='email'
                        className={`form-control ${this.hasErrorFor('email') ? 'is-invalid' : ''}`} 
                        name='email'
                        value={this.state.email}
                        onChange={this.handleFieldChange}
                      />
                    </div>

                    <div className='form-group'>
                      <label htmlFor='description'>Password</label>
                      <input
                        id='password'
                        className={`form-control ${this.hasErrorFor('password') ? 'is-invalid' : ''}`}
                        name='password'
                        value={this.state.password}
                        onChange={this.handleFieldChange}
                      />
                    </div>

                    <button type='submit' className='btn btn-primary'>Register</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>  

        )
      }
    }
    export default Register

I get that I probably make some starter mistake but this problem has been bothering me for some time.