react 路由使用react-router-dom

react 和vue一樣都是使用封裝history 來進行頁面跳轉，下面就來說一下react常用的路由插件react-router-dom這個東西在GitHub上 目前是最受歡迎的

首相還是先下載

npm i react-router-dom

引入：

這里推薦新建一個單獨的router.js文件去同意管理你的路由

router.js：

import React from 'react';
import {HashRouter, Route, Switch} from 'react-router-dom';
import {Home} from "./page/home/home"; //引入的組件
import {Mine} from "./page/mine/mine";//引入的組件

const BasicRoute = () => (
    <HashRouter>
        <Switch>
            {/*//定義路由地址*/}
            <Route exact path="/home" component={Home}/>
            <Route exact path="/" component={Mine}/>
        </Switch>
    </HashRouter>
);


export default BasicRoute;

然后再在入口頁 我這是app.js 引入router.js文件 使用就可以了

import React from 'react';
import Router from "./router"//引入router.js

import './App.css';
import './style/public.less';

function App() {
    return (
        <div className="App">
            <Router/>
        </div>
    );
}

export default App;

小計：

 在組件模塊中使用 this.props.history.push("/path")是添加一條路由記錄，使用 this.props.history.pushreplace("path")是替換最后一條路由記錄