當我使用 history.push 時，如何將狀態變量從一個組件獲取到另一個組件？

Question

我對 React JS 比較陌生，有一個問題我有以下登錄表單組件

import React from "react"
import {
    Button,
    FormGroup,
    Label,
    Input,
    Form
} from "reactstrap";
import { withRouter } from "react-router-dom";
import axios from 'axios';

class Login extends React.Component {
    constructor(props){
        super(props);
        this.state={
            username:"Sai",
            password:"intelligencealliance",
            access_token:"" ,
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

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

    handleSubmit = event => {
        event.preventDefault();
        const headers = {
            'username': this.state.username, 
            'password': this.state.password
          }
        axios.post('/login', {} ,{ headers: headers })
          .then((response) => {
            this.setState({access_token : response.data.token})
            console.log(response.data);
            axios.get("/check_auth",{
              headers: {
                'access_token': this.state.access_token
              }
            })
            .then(auth => {
              console.log(auth)
              this.props.history.push('/dashboard');
            })
          }, (error) => {
            console.log(error.response.data.message);
          });
          
        
    }

    render()
    {   
        return(
            <div className="container">
              <Form onSubmit={this.handleSubmit}>
                  <FormGroup>
                  <Label for="username">Username</Label>
                  <Input type="username" id="username" value={this.state.username} onChange={this.handleChange}/>
                  </FormGroup>
                  <FormGroup>
                  <Label for="password">Password</Label>
                  <Input type="password" id="password" value={this.state.password} onChange={this.handleChange} />
                  </FormGroup>
                  <Button type="submit" value="submit" color="primary">Login</Button>
              </Form>
            </div>
        )
    }
}

export default withRouter(Login);

和主要組件如下

import React from "react"
import {
    
} from "reactstrap";
import { Switch, Route, Redirect } from "react-router-dom";
import Login from "./LoginComponent"
import Header from "./HeaderComponent";
import Footer from "./FooterComponent";
import Home from "./HomeComponent"
import Dashboard from "./DashboardComponent"

import "../App.css"
export default function Main() {
    
        return(
            <div>
                <Header />
                <Switch>
                    <Route exact path="/home" component={Home} />
                    <Route path="/login" component={Login} />
                    <Route path="/dashboard" component={Dashboard} />
                    <Redirect to="/home" />
                </Switch>
                <Footer />
            </div>
            
        )
    
}

我想要做的是從登錄組件到儀表板組件獲取用戶名和密碼數據，儀表板組件通過主組件中的路由中的'/dashboard'連接。

實現這一目標的最佳方法是什么？

Answer 1

在登錄頁面，您可以通過這種方式將參數傳遞到儀表板頁面。

this.props.history.push({
  pathname: '/dashboard',
  state: { 
    'username': this.state.username, 
    'password': this.state.password 
  }
});

您可以像這樣訪問儀表板頁面上的參數：

this.props.location.state.username

this.props.location.state.password