class Layout extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="wrapper">
{this.props.children}
</div>
);
};
}
export default Layout
/**
* Created by Administrator on 2018/3/10 0010.
*/
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; import Layout from "page/layout/Layout.jsx";
import Home from "page/home/Home.jsx";
import Login from "page/login/Login.jsx";
import ErrorPage from "page/error-page/ErrorPage.jsx"; import 'bootstrap-sass/assets/stylesheets/_bootstrap.scss';
import 'font-awesome/scss/font-awesome.scss';
import 'styles/main.scss'; class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Router>
<Switch>
<Route path="/login" component={Login}/>
<Route path="/" render={() => (
<Layout>
<Switch>
<Route path="/" exact component={Home}/>
<Route component={ErrorPage}/>
</Switch>
</Layout>
)
}/>
</Switch>
</Router>
);
};
}
ReactDOM.render(
<App />,
document.getElementById('app')
);

react layout init的更多相关文章

  1. 关于React Native init 项目时候速度太慢的解决方法

    因为init项目的时候需要下载资源,但又因为react native的网站被墙所以下载很慢,解决方法就是换成淘宝的NPM镜像 我是直接使用了命令去替换了NPM $ npm install -g cnp ...

  2. React Native init初始化项目时报错

    之前新建RN项目都不会出现这个问题,今天报错如下,这里记录下吧. 报错截图: This will walk you through creating a new React Native projec ...

  3. React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

  4. [转] 三步将你的 React Native 项目运行在 Web 浏览器上面

    React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...

  5. React组件开发入门

    React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...

  6. React环境配置

    现在开始配置一个基础项目. 创建项目文件夹:C:\Users\Danny\Desktop\React npm init 创建package.json文件 下面的所有安装,都是--save-dev,因为 ...

  7. react ref获取dom对象

    react文档 step = React.createRef(); // init <div ref={this.step}></div> // bind componentD ...

  8. react.js 教程之 Installation 安装

    react.js 教程之 Installation 安装 运行方法 运行react有三种方式 1.如果你只是学习react,可以在http://codepen.io/gaearon/pen/rrpgN ...

  9. react native遇到的坑

    1.模拟器报错no bundle url present https://github.com/facebook/react-native/issues/12754 http://www.cnblog ...

随机推荐

  1. 吴超老师课程--HBASE的Java_API

    public static void main(String[] args) throws IOException { String tableName="hbase_tb"; S ...

  2. C#框架及概念

    EF框架

  3. JAVA寄存器

    所有进程都使用寄存器,Java虚拟机使用下列寄存器管理系统堆栈:    程序记数寄存器:跟踪程序执行的准确位置    堆栈指针寄存器:指示操作栈项    框架寄存器:指向当前执行的环境    变量寄存 ...

  4. 12 Spring框架 SpringDAO的事务管理

    上一节我们说过Spring对DAO的两个支持分为两个知识点,一个是jdbc模板,另一个是事务管理. 事务是数据库中的概念,但是在一般情况下我们需要将事务提到业务层次,这样能够使得业务具有事务的特性,来 ...

  5. 用python实现一个计算器

    import re def atom_cal(exp): # 计算乘除法 if '*' in exp: a,b = exp.split('*') return str(float(a) * float ...

  6. Keepalived 服务器状态监测

    keepalived简介: keepalived是一个类似于layer3, 4 & 5交换机制的软件,也就是我们平时说的第3层.第4层和第5层交换.Keepalived的作用是检测web服务器 ...

  7. C/C++中0xcccccccc...

    * 0xABABABAB : Used by Microsoft's HeapAlloc() to mark "no man's land" guard bytes after a ...

  8. Oauth2.0认证原理

    Oauth2.0 认证协议 Oauth2.0 应用场景: 微信联合登录     授权管理 互联网开放平台互相调用保证安全 微信提供api  给toov5调用  然后就可以获取一些微信的信息  比如微信 ...

  9. E - Water Distribution

    E - Water Distribution 题目大意: 有\(N\)座城市,给定这\(N\)座城市的坐标和初始的水量\(x_i,y_i,a_i\),在两个城市之间运水的花费是两个城市的欧几里得距离. ...

  10. VS 安装部署项目自解压程序解压后按顺序执行多个程序

    这篇blog介绍了如何用VS创建安装部署方案,以及如何制作自解压程序.然后我的程序中需要解压后按照顺序先后安装2个exe.winrar的解压后执行,虽然可以用分号填写多个应用,但貌似是同时执行的.为了 ...