一、進入到項目目錄,打開命令行,安裝react-router-dom,指令:npm install react-router-dom --save-devreact
二、在一個js文件中引入react-router-dom, import { HashRouter, Route, Switch } from 'react-router-dom'npm
三、在render函數中return路由結構,以下:react-router
<HashRouter> <Switch> <Route path='/' component={ Home } /> <Route path='/home' component={ Home } /> <Route path='/search' component={ Search } /> <Route path='/mine' component={ Mine } /> </Switch> </HashRouter>
四、將這個js文件暴露出去,在index.js中引入,以後在index.js中ReactDOM.render(<Router/>,document.getElementById('root')); 至此,當咱們在地址欄中輸入home、search或mine時,頁面都會跳到其路由對應的組件dom
五、以函數的形式進行路由跳轉,在a標籤上綁定onClick事件,經過this.props.history.push這個函數跳轉函數