react-06 using router

1 框架

2 下载路由依赖

cnpm install react-router-dom –save
//yarn add react-router-dom

3 路由组件

3.1login组件

import React,{Component} from 'react'

/*登录的路由组件*/
export default class Login extends Component{
    render(){
        return <div>Login</div>
    }
}

3.2admin组件

import React,{Component} from 'react'

/*后台管理的路由组件*/
export default class Admin extends Component{
    render(){
        return <div>Admin</div>
    }
}

3.3映射路由组件App.js

/*
应用的根组件
* */
import React,{Component} from 'react'
import {BrowserRouter,Route,Switch} from 'react-router-dom'
import Login from './pages/login/Login'
import Admin from './pages/admin/Admin'
export default class App extends Component{

    //必须有render且必须返回一个DOM虚拟对象
    render(){
        return (
            <BrowserRouter>
                <Switch>
                    {/*只匹配其中的一个*/}
                    {/*path中只能加/，前面加点或者不加/都是错误的*/}
                    <Route path="/login" component={Login}></Route>
                    <Route path="/" component={Admin}></Route>
                </Switch>
            </BrowserRouter>
        );
    }
}