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 ...
随机推荐
- 003-mysql查询表的数据大小
在需要备份数据库里面的数据时,我们需要知道数据库占用了多少磁盘大小,可以通过一些sql语句查询到整个数据库的容量,也可以单独查看表所占容量. 1.查看数据库表结构大小,要查询表所占的容量,就是把表的数 ...
- Jenkins+maven+Tomcat+SVN一键自动打包部署应用到服务器
今天请教了大神,终于把jenkins给搞明白了 现在做下笔记,防止自己老年痴呆又忘了怎么配置 (截图可能不够清晰,有不清楚的随时评论打call) 机器配置: 安装配置规划 机器 192.168.169 ...
- 阿里云上Docker Compose部署wordpress
先上官方文档: https://docs.docker.com/compose/wordpress/ 我的环境: [root@xyjk1002 ~]# cat /etc/redhat-release ...
- PHP逐行读取数据
PHP逐行读取数据 <?php $file = fopen("Minot.txt", "r") or exit("Unable to open ...
- mysql二进制包安装和遇到的问题
一.编译安装 tar -zxf mysql-5.5.32-linux2.6-x86_64.tar.gz mv mysql-5.5.32-linux2.6-x86_64 /application/mys ...
- SvsUtil.exe生成服务文件
在程序中调用某个 WCF Services 一般按照如下步骤进行: 生成对应 Service 的代理类.程序创建该代理类实例,访问指定方法. 生成代理类 可通过在 Visual Studio 中针对某 ...
- PHP 多字节字符串 函数
参考资料 多字节字符编码方案和他们相关的问题相当复杂,超越了本文档的范围. 关于这些话题的更多信息请参考以下 URL 和其他资源. Unicode materials » http://www.uni ...
- json字符串转化为json对象and 对象转化为 json字符串
第一种方法: var data =evel('('+jsonstr+')') 解析: 这种方法是常用的方法, 即动态执行 javascript代码 在堆中存放数据. 存在安全问题. 第二种方法: ...
- c刷新缓冲区
int c; while((c = getchar()) != '\n' && c != EOF);
- Linux系统下使用pwgen生成密码的使用教程
pwgen生成的密码易于记忆且相当安全.从技术上来说,容易记忆的密码不会比随机生成的密码更加安全.但是,在大多数情况下,pwgen生成的密码已经足够安全,除了网银密码等需要高安全等级的情况外.使用易于 ...