zoukankan      html  css  js  c++  java
  • 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>
            )
        }
    }
  • 相关阅读:
    Python_堡垒机开发基础
    用haslib给字符加密
    python学习(集合)
    编码
    小练习03
    python学习(字典)
    小练习02
    python学习(列表,元祖)
    小练习
    python学习
  • 原文地址:https://www.cnblogs.com/tommymarc/p/12012034.html
Copyright © 2011-2022 走看看