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

Question

I am new to react application development i am sending listing my code over here to get the solution there are different files

right now i have 1 index.html and one app.js and index.js and login.js and product.js

my app.js have routing implemented into it and index.js have browser router in it and login js have axios api call and plain login application and by successful login i am moving to another page ie product.js

so listing my files

1) App.js

import React from 'react';
import { Switch, Route } from 'react-router-dom'
import Product from './components/product';
import Coal from './components/coal';
import Summary from './components/summary';
import Login from './components/login';

class App extends React.Component {
  render() {
    return (
      <Switch>
        <Route exact path = '/' component = {Login} />
        <Route path = "/product" component = {Product} />
        <Route path = "/coal" component = {Coal} />
        <Route path = "/summary" component = {Summary} />
      </Switch>

    );
  }
}

export default App;

2) Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
import Login from './components/login';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<BrowserRouter historty = {this.historty}>
    <Login/>
</BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

3) Login.js

import React from 'react'
import axios from 'axios';

class Login extends React.Component  {
constructor(props) {
    super(props)
    this.state = ({
        admin_id : '',
        password : '',
    });

    this.handlePassword = this.handlePassword.bind(this);
    this.handleUserName  =this.handleUserName.bind(this);
    this.loginUp = this.loginUp.bind(this);
}

handleUserName(e) {
    e.preventDefault();
    this.setState({admin_id: e.target.value})
}

handlePassword(e) {
    e.preventDefault();
    this.setState({password: e.target.value})
}

componentDidMount() {
}

loginUp() {

    let userDetails = {
        admin_id: this.state.admin_id,
        password: this.state.password
    }
    if(this.state.admin_id === '' && this.state.password === '') {
        alert('please enter fields');
    } else {
      axios.post("http://103.10.191.145:1337/sapl/admin/login", userDetails , this.axiosConfig)
      .then((res) => {
        if(res.data === 'Admin login successfully'){
            this.setState({userName : userDetails.admin_id})
            this.props.history.push('/product');        
        } else {
            alert('we are not in success');
        }
      })
      .catch((err) => {
          console.log('axios error' , err);
      })
    }
  }


render() {
return(
  <div className = "container">
    <div className ="row">
        <div className = "col-md-12">
            <h3>Login</h3>
            <input className="form-control" type="text" placeholder="EmailID" value = {this.state.admin_id}  onChange = {this.handleUserName} />
            <input className="form-control" type="password" placeholder="password" value = {this.state.password} onChange={this.handlePassword} />
            <button className="btn btn-primary" type="button" onClick={() => this.loginUp()}> Login</button>
        </div>
    </div>
  </div>
    )   
  }
}

export default 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

so i want to get the username into my product .js and print that into html tag please can someone help i want to show case PoC

Answer 1

You can pass variable with history.push

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

and access them in product component be like:

this.props.location.userDetails

I hope this would be much helpful.