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 项目引入路由的更多相关文章
- React 项目引入 Dva
背景 现在手上在做的 React 项目因为年代久远,用的 Redux,写代码的体验不太好,所以想升级一下引入 dva.以往使用 dva 都是使用 dva-cli 直接生成 dva 项目,或者在使用 a ...
- 【React】react项目引入echarts插件 K线图
参考npm文档:https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步: ...
- react项目引入使用element-react报错
解决办法 npm i react-hot-loader@next -D
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function
react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...
- React项目模板-从项目搭建到部署
前一段时间做了一个小项目,时间比较紧,就一个人月.最终希望能够通过微信公众号链接启动应用. 项目的业务细节就不多说了,主要是想分享一下做这个项目技术方面的一些经验. 技术选型 参考范围大致三种:Ang ...
- react项目后台及上线步骤
应同学要求,本人将react项目创建后台及上线流程书写如下: 前端部分 略…… 后台部分 (注:这里的后台是用的nodejs搭建的,使用的是express框架+ejs模板) 首先通过express快速 ...
随机推荐
- todo demo
Todo 功能实现 https://rencoo.github.io/appDemo/todo/index.html ---1.添加事项 ---2.置顶事项 ---3.删除事项 ---4.用时排序 - ...
- PC端、移动端页面适配方案
前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...
- 35个Java代码优化的细节,你知道几个?
前言 代码 优化 ,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没 ...
- tabhost改变标签颜色
package uiframe.zyx.uiframe.com.uiframe.fragments;import android.os.Bundle;import android.support.an ...
- Docker图形化工具Portainer详解
一.介绍 说明: Portainer是易于使用的软件,可为软件开发人员和IT操作人员提供直观的界面. Portainer为你提供Docker环境的详细概述,并允许你管理容器,镜像,网络和数据卷 ...
- vue中点击屏幕其他区域关闭自定义div弹出框
直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...
- Docker从入门到掉坑(四):上手k8s避坑指南
在之前的几篇文章中,主要还是讲解了关于简单的docker容器该如何进行管理和操作,在接下来的这篇文章开始,我们将开始进入对于k8s模块的学习 不熟悉的可以先回顾之前的章节,Docker教程系列文章将归 ...
- vue-practice
vue-完整代码 这是一个完整的vue案例,但是接口似乎都失效了,单是代码本身还是很有参考价值的呦!~ 里面包含了:vue,vue-router,....,还是直接看json文件吧 { "n ...
- JDK1.8新特性-Lambda表达式
Lambda 表达式 Lambda 表达式,也可称为闭包,它是推动 Java 8 发布的最重要新特性. Lambda 允许把函数作为一个方法的参数(函数作为参数传递进方法中). 使用 Lambda 表 ...
- 元类, pymysql
元类, pymysql 一.元类 自定义元类 ''' 1.什么是元类? - 类的类就是type,其实type就是元类 2.元类的作用? 3.如何创建元类以及使用? ''' # # 1.一切皆对象 # ...