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 ...
随机推荐
- HDU1506: Largest Rectangle in a Histogram(最大子矩阵,好题动态优化左右边界)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1506 刚开始没考虑时间复杂度,直接敲了,直接tle了,之后没有思路,然后看题解,看见大神写的优化非常棒. ...
- linux进程内存到底怎么看 剖析top命令显示的VIRT RES SHR值
引 言: top命令作为Linux下最常用的性能分析工具之一,可以监控.收集进程的CPU.IO.内存使用情况.比如我们可以通过top命令获得一个进程使用了多少虚拟内存(VIRT).物理内存(RES). ...
- Selenium WebDriver 工作原理
WebDriver与之前Selenium的js注入实现不同:Selenium通过JS来定位元素处理元素(基本上所有元素都可以定位到)WebDriver通过WebDriver API定位处理元素:通过浏 ...
- matplotlib作图——plot() 线图
线图 #定义 matplotlib.pyplot.plot() plot([x], y, [fmt], data=None, **kwargs) plot([x], y, [fmt], [x2], y ...
- Delphi 正则表达式语法(9): 临界匹配 - 也叫"预搜索"与"反向预搜索"
Delphi 正则表达式语法(9): 临界匹配 - 也叫"预搜索"与"反向预搜索" //匹配右边 var reg: TPerlRegEx; begin ...
- java return redirect
return “/user/new” 或 return “/user/edit” 如果new页面有下拉(举例)组件,在return之前如果没有准备select所需要的数据,则return到new的页面 ...
- Android 属性自定义及使用获取浅析
一.概述 相信你已经知道,Android 可使用 XML 标签语言进行界面的定义.每个标签中有一个一个的属性,这些属性有相应的属性值.例如: <cn.neillee.composedmenu.R ...
- java发送http请求和多线程
0 概述 在写app后台的时候,需要调用另一个服务器上的算法服务,所以需要发送http请求来获取结果. 考虑到一个功能(比如智能中医)需要调用好几个接口(人脸识别,舌苔识别,饮食推荐),大部分时间花在 ...
- python入门四:异常
一.异常 异常就是在触发异常条件时(解释器或程序员)而采取相应的措施 c++中异常使用try, throw, catch等关键字,而python中使用try, raise, except等 二.标准异 ...
- UILable 的 属性设置
//UILable的大小自适应实例 UILabel *myLable = [[UILabel alloc] initWithFrame:CGRectMake(, , , )];//设定位置与大小 [m ...