react中的路由--react-router-dom

一、進入到項目目錄，打開命令行，安裝react-router-dom，指令：npm install react-router-dom --save-dev

二、在一個js文件中引入react-router-dom， import { HashRouter, Route, Switch } from 'react-router-dom'

三、在render函數中return路由結構,以下：

<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時，頁面都會跳到其路由對應的組件

五、以函數的形式進行路由跳轉，在a標籤上綁定onClick事件，經過this.props.history.push這個函數跳轉