四、路由跳转和get传值

4-1 Link

class Home extends Component {
    constructor(props){
        super(props);
        this.state = {
            id:1001
        }
    }
    render() {
        return (
            <div>
                主页
                <Link to={`/detail?id=${this.state.id}`}>
                    <Button>detail</Button>
                </Link>
            </div>
        );
    }
}

4-2 事件跳转 this.props.history.push()

<Button onClick={this.handleToggle}>detail</Button>
handleToggle=()=>{
        this.props.history.push(`/detail?id=${this.state.id}`)
}

4-3 query-string解析get传值

//Detail.js
//this.props.location.search
//安装依赖 
yarn add query-string
import queryString from 'query-string'
class Detail extends Component {
    ...
    componentDidMount() {
        var url = this.props.location.search;
        console.log(queryString.parse(url))
    }
}
export default Detail;