Link:a标签,需设置path属性,值为路径,点击后会跳转到指定的路径
Router:用来包裹整个组件
Route:指定对应路径所展示的组件,Route写在哪里组件就展示在哪里
路由会给组件提供history属性,在this.props里,里面有两种方法,1、push跳转到参数所指定的路径,2、go(n)跳转到历史记录的第几条路径,n可为正负
import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
class Login extends React.Component{
handleClick=()=>{
// console.log(this.props);
this.props.history.push('/home')
}
render(){
// console.log(this.props);
return(
<div>
<p>登录界面</p>
<button onClick={this.handleClick}>登录</button>
</div>
)
}
}
class Home extends React.Component{
handleClick=()=>{
// console.log(this.prop