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> ) } }
- 上一篇 »React引入css的三种方式小结
- 下一篇 »react16 路由按需加载、路由权限配置