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 ...
随机推荐
- 004-安装CentOS7后需要的操作
1 安装EPEL源 EPEL即Extra Packages for Enterprise Linux,是基于Fedora的一个项目,为红帽系的操作系统提供额外的软件包,适用于RHEL.CentOS和S ...
- less本地环境输出hello-world
在学任何东西之前, 我就是有个习惯, 先搞定这个东西最最简单的使用方法. 然后在 深入学习, 毫无疑问hello-world一直是那么简单. 准备环境 较新版的高级浏览器. WAMP环境. less. ...
- Java io流详解一
原文地址http://www.cnblogs.com/xdp-gacl/p/3634409.html java基础学习总结——流 一.JAVA流式输入/输出原理
- iOS学习之二维码扫描
这几天刚好将本人高仿新浪微博的事情进行一个阶段性的tag,在此也将这个项目在实现二维码扫描这个功能来做一个简要的记录.关于高仿新浪微博的源代码,本人已经将全部代码托管到github,地址在这里.欢迎大 ...
- [转]C#读写远程共享文件夹
1.在服务器设置一个共享文件夹,在这里我的服务器ip地址是10.200.8.73,共享文件夹名字是share,访问权限,用户名是administrator,密码是11111111. 2.新建一个控制台 ...
- url末尾的斜杠作用探秘
今天突然好奇,想区分www.abc.com/efg 和www.abc.com/efg/这两个网址的区别.即分析一下url末尾加个斜杠是否有特殊的效果. 找到网上的介绍: 当Web服务器接收到对某个末尾 ...
- ng-click得到当前元素,
直接上代码: <!DOCTYPE html> <html> <head> <title></title> <script src=&q ...
- 20165101刘天野 2018-2019-2《网络对抗技术》Exp4 恶意代码分析
20165101刘天野 2018-2019-2<网络对抗技术>Exp4 恶意代码分析 1. 实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件 ...
- mfc报文相关算法
1.传入_T("AAAABBBBCC"),返回_T("AA AA BB BB CC") CString FormatPacket(CString packet_ ...
- 使用C语言扩展Python提供性能
python底层是用c写的,c本身是一个非常底层的语言,所以它做某些事情的效率肯定会比上层语言高一些. 比如有些自动化测试用的python库,会对系统的UI进行一些捕获,点击之类的操作,这必然要用到c ...