react 基本路由跳转 传参

A页面
import React from ‘react’
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from ‘react-router-dom’

class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: ‘’,
userPassword: ‘’
}
}

componentDidMount(){
    console.log('componentDidMount')
}
render() {
    return (
        <div>
            <input value={this.state.userName} onChange={this.inputValChangeName} />
            <input value={this.state.userPassword} onChange={this.inputValChangePwd} />
            <button onClick={this.userLogin.bind(this,)}>登录</button>
            {/* <Link to='/home'>Login</Link> */}
            </div>)
}



inputValChangeName= (e) => {
    this.setState({
        userName: e.target.value
    });
}


inputValChangePwd=(e) =>{
    this.setState({
        userPassword: e.target.value
    });
}
userLogin() {
    let urseName = this.state.userName
    console.log(urseName)
    // 跳转
    this.props.history.push({
        pathname:'./home',
        state:{
        'userId':123
        }
    })

}

}

export default Login

B页面接受数据

import React from ‘react’
import { Link } from ‘react-router-dom’

class Home extends React.Component {
constructor(props) {
super(props)
this.state = {
title: ‘标签’,
nameList: [‘2021’, ‘03-03’, ‘03:03’],
index: 0,
colorIndex:1,
classIndex:2
}
console.log(‘constructor’)
}

componentWillMount() {
    console.log('componentWillMount')
}

componentDidMount() {
    // 接受数据
    console.log(this.props.location.state.userId)
}

render() {
    return (
        <div>
            <h3>{this.state.title}</h3>
            {
                this.state.nameList.map((element, index) => {
                    // 不渲染index=this.state.index
                    if (index != this.state.index) {
                        // index =this.state.classIndex 修改color|| index==this.state.classIndex添加类型名active
                        console.log(index)
                        return (<p className={["tel", index==this.state.classIndex?"active":null].join(' ')}  style={{ color: index === this.state.colorIndex ? 'red' : 'yellow' }}  key={index}>{element}</p>)
                    }
                })
            }
            <Link to='./'>Logout</Link>
        </div>)

}

}

export default Home