下载路由包

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 项目引入路由的更多相关文章

  1. React 项目引入 Dva

    背景 现在手上在做的 React 项目因为年代久远,用的 Redux,写代码的体验不太好,所以想升级一下引入 dva.以往使用 dva 都是使用 dva-cli 直接生成 dva 项目,或者在使用 a ...

  2. 【React】react项目引入echarts插件 K线图

    参考npm文档:https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步: ...

  3. react项目引入使用element-react报错

    解决办法 npm i react-hot-loader@next -D

  4. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  5. 《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件

    实战 上接,笔记:https://blog.csdn.net/u010132177/article/details/104150177 https://gitee.com/pasaulis/react ...

  6. 七天接手react项目 系列 —— react 路由

    其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...

  7. 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function

    react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...

  8. React项目模板-从项目搭建到部署

    前一段时间做了一个小项目,时间比较紧,就一个人月.最终希望能够通过微信公众号链接启动应用. 项目的业务细节就不多说了,主要是想分享一下做这个项目技术方面的一些经验. 技术选型 参考范围大致三种:Ang ...

  9. react项目后台及上线步骤

    应同学要求,本人将react项目创建后台及上线流程书写如下: 前端部分 略…… 后台部分 (注:这里的后台是用的nodejs搭建的,使用的是express框架+ejs模板) 首先通过express快速 ...

随机推荐

  1. todo demo

    Todo 功能实现 https://rencoo.github.io/appDemo/todo/index.html ---1.添加事项 ---2.置顶事项 ---3.删除事项 ---4.用时排序 - ...

  2. PC端、移动端页面适配方案

    前言 页面自适应PC端.移动端大体上可以分为两种: 1.在同一个页面进行自适应布局,通常使用CSS3 @media 媒体查询器实现 2.两套页面,在后端进行统一适配,根据不同的浏览器UA返回对应的页面 ...

  3. 35个Java代码优化的细节,你知道几个?

    前言 代码 优化 ,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没 ...

  4. tabhost改变标签颜色

    package uiframe.zyx.uiframe.com.uiframe.fragments;import android.os.Bundle;import android.support.an ...

  5. Docker图形化工具Portainer详解

    一.介绍 说明:   Portainer是易于使用的软件,可为软件开发人员和IT操作人员提供直观的界面.   Portainer为你提供Docker环境的详细概述,并允许你管理容器,镜像,网络和数据卷 ...

  6. vue中点击屏幕其他区域关闭自定义div弹出框

    直接上代码: mounted: function () { let that = this; $(document).on('click', function (e) { let dom = $('. ...

  7. Docker从入门到掉坑(四):上手k8s避坑指南

    在之前的几篇文章中,主要还是讲解了关于简单的docker容器该如何进行管理和操作,在接下来的这篇文章开始,我们将开始进入对于k8s模块的学习 不熟悉的可以先回顾之前的章节,Docker教程系列文章将归 ...

  8. vue-practice

    vue-完整代码 这是一个完整的vue案例,但是接口似乎都失效了,单是代码本身还是很有参考价值的呦!~ 里面包含了:vue,vue-router,....,还是直接看json文件吧 { "n ...

  9. JDK1.8新特性-Lambda表达式

    Lambda 表达式 Lambda 表达式,也可称为闭包,它是推动 Java 8 发布的最重要新特性. Lambda 允许把函数作为一个方法的参数(函数作为参数传递进方法中). 使用 Lambda 表 ...

  10. 元类, pymysql

    元类, pymysql 一.元类 自定义元类 ''' 1.什么是元类? - 类的类就是type,其实type就是元类 2.元类的作用? 3.如何创建元类以及使用? ''' # # 1.一切皆对象 # ...