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>
        )
    }
}