如何通过在 react.js 中从该组件设置道具来重定向到另一个组件

您对此问题有多种选择，但我注意到您正在使用，react-router-dom因此您可以执行以下操作之一：

• 将用户名作为 url 的参数传递：

  <Route path="/home/:username" component={Home} />;
  const Home = (props)=>{
    return(<h1>Welcome {props.match.params.username}</h1>);
  }
  

并像这样重定向：

<Redirect to="/home/john-doe" />

• 使用redux您的变量存储在全球存储和从任何地方访问它们。

常量.js：

export const SET_USERNAME = 'SET_USERNAME'

动作.js：

import {SET_USERNAME} from './constants'
export function setUsername(payload) {
  return {
    type: SET_USERNAME,
    payload,
  };
}

减速器.js：

import {
  SET_USERNAME,
} from './constants';

export const initialState = {
  username: '',
};

export function userReducer(state = initialState, action) {
  switch (action.type) {
    case SET_USERNAME:
      return { ...state, username: action.payload }
    default:
      return state;
  }
}

登录.js：

import React, {Component} from 'react';
import axios from 'axios';
// import Loader from 'react-loader-spinner';
import {Link, Route, Redirect} from 'react-router-dom';
import { connect } from 'react-redux';
import {setUsername} from './actions'
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import './Login.css';
import Home from '../Home/Home'


class Login extends Component {
  state = {
    email: null,
    password: null,
    status: null,
    name: null
  }
  submitHandler = (event) => {
    event.preventDefault();
    console.log(this.state);
    axios.get("http://localhost:5000/login/" + this.state.email + "/" + this.state.password).then((res) => {
      this.setState({status: res.status, name: res.data.name});
      this.props.setUsername(res.data.name) // Here you set the username in your redux store
      console.log(this.state);
    });
  }
  changeHandler = (event) => {
    event.preventDefault();
    const {name, value} = event.target;
    this.setState({[name]: value});
  }

  render() {
    const home = <Home/>
    return (<div className="wrapper">
      <div className="form-wrapper">
        <h1>Login</h1>
        <form onSubmit={this.submitHandler} noValidate>
          <div className="email">
            <label htmlFor="email">Email</label>
            <input type="text" placeholder="Email" name="email" noValidate onChange={this.changeHandler}/>
          </div>
          <div className="password">
            <label htmlFor="password">Password</label>
            <input type="password" placeholder="Password" name="password" noValidate onChange={this.changeHandler}/>
          </div>
          <div className="login">
            <button type="submit">Login</button>
          </div>
          <div>
            {((this.state.status) && this.state.status === 200) ? <Redirect to="/home"/> : null}
          </div>
        </form>
      </div>
    </div>);
  }

}

export function mapDispatchToProps(dispatch) {
  return {
    setUsername: username => dispatch(setUsername(username)),
  };
}

const withConnect = connect(
  null,
  mapDispatchToProps,
);

export default withConnect(Login);

主页.js：

import React, {Component} from 'react';
import { connect } from 'react-redux';
class Home extends Component{
  render(){
    const {username} = this.props;
    return(<h1>`Welcome ${username}`</h1>);
  }
}

function mapStateToProps(state) {
  const { username } = state.user;
  return { username };
}

const withConnect = connect(mapStateToProps);

export default withConnect(Home);

• 使用 cookie 来存储登录用户的用户名。

import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('username', username);

实际上可能有多种其他解决方案，但这些是我想到的事情。希望对你有帮助！