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. 使用 10046 查看执行计划并读懂 trace 文件

    查看 sql 执行计划的方法有许多种, 10046 事件就是其中的一种. 与其他查看 sql 执行计划不同, 当我们遇到比较复杂的 sql 语句, 我们可以通过 10046 跟踪 sql 得到执行计划 ...

  2. Dijkstra 算法初探

    一.Dijkstra 算法的介绍     Dijkstra 算法,又叫迪科斯彻算法(Dijkstra),算法解决的是有向图中单个源点到其他顶点的最短路径问题.举例来说,如果图中的顶点表示城市,而边上的 ...

  3. python并发编程之IO模型(Day38)

    一.IO模型介绍 为了更好的学习IO模型,可以先看同步,异步,阻塞,非阻塞 http://www.cnblogs.com/linhaifeng/articles/7430066.html#_label ...

  4. iOS数据存储到本地的几种方法

    A,归档解档(多针对于模型或者数组,利用MJExtension) 1,先在model里的.m文件写上MJCodingImplementation 2,再进行模型归档: #define APP_DOCU ...

  5. git使用基础

    一.git介绍 git是由 Linus 开发的一种“分布式版本控制”软件,而在此之前,版本控制基本上都是“集中式版本控制”,如:CVS,SVN 等.两者的区别: 1. "集中式版本控制系统& ...

  6. powerdesigner解决创建多个表表主键名称重复的问题

    选择菜单栏的tools选项,选择Model  Options..,选择Model Settings  只要将图片中的选择打钩去掉即可(操作步骤1),同时设置为默认选项(操作步骤2),防止以后问题又出现 ...

  7. Python3:自动发送账单邮件

    Python3:自动发送账单邮件 一.前言 民间借贷,没有信用卡那样,每月会收到账单:为了民间借贷管理更加合理化,写了个还款账单小程序. 二.源码 (1)配置文件代码: [dbmysql] ip = ...

  8. HTML5相册浏览插件

    在线演示 本地下载

  9. centos 7 install virtualbox

    from:https://wiki.centos.org/HowTos/Virtualization/VirtualBox Installing VirtualBox cd /etc/yum.repo ...

  10. 20145219 《Java程序设计》第04周学习总结

    20145219 <Java程序设计>第04周学习总结 教材学习内容总结 继承 继承就是避免多个类间重复定义共同行为. 面向对象中,子类继承父类,就是把程序中相同的代码部分提升为父类. R ...