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. appium 自动化测试案例

    原文地址http://www.cnblogs.com/tobecrazy/p/4579631.html 原文地址http://www.cnblogs.com/tobecrazy/ 该博主有很多干货,可 ...

  2. 第一节、Alex 讲解 python+mysql 交互;

    Python Mysql 交互 A.Alex 的语法展示: import MySQLdb  try:      conn=MySQL.connect(host='localhost',user='ro ...

  3. Uber中国在地方城市的人员架构是怎样的?

    http://www.thepaper.cn/newsDetail_forward_1390516 澎湃新闻:Uber中国在地方城市的人员架构是怎样的?   柳甄:一般是3人组成的小团队作战.一名城市 ...

  4. java 获取request参数集

    request里有两个方法 request.getParameterMap(); request.getParameterNames(); 我想用这两种方法获取. 1.用request.getPara ...

  5. LeetCode:前K个高频单词【692】

    LeetCode:前K个高频单词[692] 题目描述 给一非空的单词列表,返回前 k 个出现次数最多的单词. 返回的答案应该按单词出现频率由高到低排序.如果不同的单词有相同出现频率,按字母顺序排序. ...

  6. springmvc国际化资源文件

    spring配置文件中添加 <!-- 配置国际化资源文件 --> <bean id="messageSource" class="org.springf ...

  7. 对 java 设计模式的一些了解 (正在学习整理中)

    A .设计模式的作用 从书上摘话给你们看看 帮助我们将应用组织成容易了解,容易维护,具有弹性的架构,建立可维护的OO系统,要诀在于随时想到系统以后可能需要的变化以及应付变化的原则. 这么复杂的解释肯定 ...

  8. phpword使用

    composer 安装 https://packagist.org/packages/phpoffice/phpword 开发文档:http://phpword.readthedocs.io/en/l ...

  9. java中string与byte[]之间的转化分析

    背景:最近接触zookeeper的java开发,由于zookeeper中传的好像都是byte[]的数据(需要进一步确认),好多情况下都需要进行转换. 1)和zookeeper原生API不同,通过zkc ...

  10. window下安裝redis服務

    一.下载windows版本的Redis github下载地址:https://github.com/MicrosoftArchive/redis/releases/tag/win-3.2.100   ...