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 ...
随机推荐
- 使用 10046 查看执行计划并读懂 trace 文件
查看 sql 执行计划的方法有许多种, 10046 事件就是其中的一种. 与其他查看 sql 执行计划不同, 当我们遇到比较复杂的 sql 语句, 我们可以通过 10046 跟踪 sql 得到执行计划 ...
- Dijkstra 算法初探
一.Dijkstra 算法的介绍 Dijkstra 算法,又叫迪科斯彻算法(Dijkstra),算法解决的是有向图中单个源点到其他顶点的最短路径问题.举例来说,如果图中的顶点表示城市,而边上的 ...
- python并发编程之IO模型(Day38)
一.IO模型介绍 为了更好的学习IO模型,可以先看同步,异步,阻塞,非阻塞 http://www.cnblogs.com/linhaifeng/articles/7430066.html#_label ...
- iOS数据存储到本地的几种方法
A,归档解档(多针对于模型或者数组,利用MJExtension) 1,先在model里的.m文件写上MJCodingImplementation 2,再进行模型归档: #define APP_DOCU ...
- git使用基础
一.git介绍 git是由 Linus 开发的一种“分布式版本控制”软件,而在此之前,版本控制基本上都是“集中式版本控制”,如:CVS,SVN 等.两者的区别: 1. "集中式版本控制系统& ...
- powerdesigner解决创建多个表表主键名称重复的问题
选择菜单栏的tools选项,选择Model Options..,选择Model Settings 只要将图片中的选择打钩去掉即可(操作步骤1),同时设置为默认选项(操作步骤2),防止以后问题又出现 ...
- Python3:自动发送账单邮件
Python3:自动发送账单邮件 一.前言 民间借贷,没有信用卡那样,每月会收到账单:为了民间借贷管理更加合理化,写了个还款账单小程序. 二.源码 (1)配置文件代码: [dbmysql] ip = ...
- HTML5相册浏览插件
在线演示 本地下载
- centos 7 install virtualbox
from:https://wiki.centos.org/HowTos/Virtualization/VirtualBox Installing VirtualBox cd /etc/yum.repo ...
- 20145219 《Java程序设计》第04周学习总结
20145219 <Java程序设计>第04周学习总结 教材学习内容总结 继承 继承就是避免多个类间重复定义共同行为. 面向对象中,子类继承父类,就是把程序中相同的代码部分提升为父类. R ...