react layout init
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的更多相关文章
- 关于React Native init 项目时候速度太慢的解决方法
因为init项目的时候需要下载资源,但又因为react native的网站被墙所以下载很慢,解决方法就是换成淘宝的NPM镜像 我是直接使用了命令去替换了NPM $ npm install -g cnp ...
- React Native init初始化项目时报错
之前新建RN项目都不会出现这个问题,今天报错如下,这里记录下吧. 报错截图: This will walk you through creating a new React Native projec ...
- React Native 项目运行在 Web 浏览器上面
React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...
- [转] 三步将你的 React Native 项目运行在 Web 浏览器上面
React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力.相比之前的 Web app 来说,对于性能和用户体验提升了非常多. 但是 React Nati ...
- React组件开发入门
React 组件开发入门 Introduction 本文组成: Ryan Clark文章Getting started with React的翻译. 博主的实践心得. React由Facebook的程 ...
- React环境配置
现在开始配置一个基础项目. 创建项目文件夹:C:\Users\Danny\Desktop\React npm init 创建package.json文件 下面的所有安装,都是--save-dev,因为 ...
- react ref获取dom对象
react文档 step = React.createRef(); // init <div ref={this.step}></div> // bind componentD ...
- react.js 教程之 Installation 安装
react.js 教程之 Installation 安装 运行方法 运行react有三种方式 1.如果你只是学习react,可以在http://codepen.io/gaearon/pen/rrpgN ...
- react native遇到的坑
1.模拟器报错no bundle url present https://github.com/facebook/react-native/issues/12754 http://www.cnblog ...
随机推荐
- appium 自动化测试案例
原文地址http://www.cnblogs.com/tobecrazy/p/4579631.html 原文地址http://www.cnblogs.com/tobecrazy/ 该博主有很多干货,可 ...
- 第一节、Alex 讲解 python+mysql 交互;
Python Mysql 交互 A.Alex 的语法展示: import MySQLdb try: conn=MySQL.connect(host='localhost',user='ro ...
- Uber中国在地方城市的人员架构是怎样的?
http://www.thepaper.cn/newsDetail_forward_1390516 澎湃新闻:Uber中国在地方城市的人员架构是怎样的? 柳甄:一般是3人组成的小团队作战.一名城市 ...
- java 获取request参数集
request里有两个方法 request.getParameterMap(); request.getParameterNames(); 我想用这两种方法获取. 1.用request.getPara ...
- LeetCode:前K个高频单词【692】
LeetCode:前K个高频单词[692] 题目描述 给一非空的单词列表,返回前 k 个出现次数最多的单词. 返回的答案应该按单词出现频率由高到低排序.如果不同的单词有相同出现频率,按字母顺序排序. ...
- springmvc国际化资源文件
spring配置文件中添加 <!-- 配置国际化资源文件 --> <bean id="messageSource" class="org.springf ...
- 对 java 设计模式的一些了解 (正在学习整理中)
A .设计模式的作用 从书上摘话给你们看看 帮助我们将应用组织成容易了解,容易维护,具有弹性的架构,建立可维护的OO系统,要诀在于随时想到系统以后可能需要的变化以及应付变化的原则. 这么复杂的解释肯定 ...
- phpword使用
composer 安装 https://packagist.org/packages/phpoffice/phpword 开发文档:http://phpword.readthedocs.io/en/l ...
- java中string与byte[]之间的转化分析
背景:最近接触zookeeper的java开发,由于zookeeper中传的好像都是byte[]的数据(需要进一步确认),好多情况下都需要进行转换. 1)和zookeeper原生API不同,通过zkc ...
- window下安裝redis服務
一.下载windows版本的Redis github下载地址:https://github.com/MicrosoftArchive/redis/releases/tag/win-3.2.100 ...