react 項目引入路由

下載路由包

npm i react-router-dom -d

前台路由

登陸：

/login
/login.jsx

App.js

import React ,{Component} from 'react';
// import { Button , message} from 'antd';
import {BrowserRouter,Route,Switch} from 'react-router-dom'
import Login from './pages/login/login';
import Admin from './pages/admin/admin'

/* 
應用的根組件
switch 只匹配其中一個
*/

export default class App extends Component{
    render(){
        return (
            <BrowserRouter>
                <Switch>
                     <Route path='/login' component={Login}></Route>
                     <Route path='/' component={Admin}></Route>
                </Switch>

            </BrowserRouter>    
            )
    }

}

Login.jsx

import React, { Component } from 'react'
/* 
登陸頁面 
*/
export default class Login extends Component{
    render(){
        return (
            <div>Login</div>
        )
    }
}

Admin.jsx

import React, { Component } from 'react'
/* 
后台管理的路由頁面 
*/
export default class Admin extends Component {
    render() {
        return (
            <div>
                Admin
            </div>
        )
    }
}