react-router4 第一篇
无奈,英语4级没过,只能靠猜了。。
首先就是安装了
npm install --save-dev react
npm install --save-dev react-dom
npm install --save-dev react-router@4
npm install --save-dev react-router-dom
不管有用没用先装上!!!
新建一个webpack.config.js,这里使用webpack2来打包jsx
var webpack = require("webpack");
var path = require("path");
module.exports = {
context: __dirname + "/app/js",
entry: {
login: ["./login.js"], // 为了将来的多入口写法
},
devtool: "source-map", // 为了可以在控制台跟踪到自己的代码位置,精确到行
output: {
path: path.resolve(__dirname,"static/js"), // 输出目录
filename: "[name].bundle.js", // 输出文件名
},
module: {
rules: [
{
test: /\.js|\.jsx/,
exclude: /node_modules/,
use: [{
loader: "babel-loader",
options: {
presets: ["es2015", "react", "babel-polyfill"] // 打包模块,babel-polyfill是为了让axios兼容ie的,,不用promise对象可以不写
}
}]
},
{
test: /\.css$/,
use: [
{
loader: "style-loader",
options: {
// modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
}
},
{
loader: "css-loader",
options: {
// modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
}
},
// {
// loader: "postcss-loader", // 添加浏览器前缀
// options: {
// plugins: function () {
// return [
// require('autoprefixer')
// ]
// }
// }
// }
]
}
]
},
devServer: { // 打包加自动刷新,webpack-dev-server --hot 可以自动热替换,,,虽然我并没有感觉到有多快。。。
contentBase: __dirname,
host: '0.0.0.0',
port: 5005,
inline: true,
historyApiFallback: true,
}
}
开始写react-router啦
以下代码,完全复制于 https://reacttraining.com/react-router/web/example/basic
import React from 'react'
import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'
const BasicExample = () => (
<Router> // 创建一个路由
<div>
<ul> // Link 组件 相当于a标签,to属性相当于a标签中的href,可以打开控制台看到,
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/topics">Topics</Link></li>
</ul>
<hr/>
// 监听路由,地址栏的变化,,很抱歉exact的意思我现在都不知道,观察到exact 在跟路由下,和exact={activeOnlyWhenExact}
<Route exact path="/" component={Home}/> // 如果地址栏访问了跟路径,比如http://localhost:5005/ 就会去渲染<Home /> 组件
<Route path="/about" component={About}/> // 如果地址栏访问了/about 路径,比如http://localhost:5005/about 就会去渲染<About/> 组件
<Route path="/topics" component={Topics}/> // 如果地址栏访问了topics 路径,比如http://localhost:5005/topics 就会去渲染<Topics/> 组件
</div>
</Router>
)
这就是react-router的最简单的用法,什么附加功能都没有,,仅仅是根据地址栏去渲染相应的组件!!!,,仅此而已,
不过这里有一个特别坑的地方,如果你的当前路径是http://localhost:5005/templates/的话,去访问 /about 路由,地址栏会直接变成http://localhost:5005/about,,然后再也后退不回去了,,当然后面的教程里肯定有解决方法,只是我还不知道,。。
以上代码,完全复制于 https://reacttraining.com/react-router/web/example/basic
react-router4 第一篇的更多相关文章
- AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX
AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX 一.什么是JSX 使用JSX声明一个变量(REACT当中的元素): const element =< ...
- 诱人的 react 视频教程-基础篇(14 个视频)
诱人的 react 视频教程-基础篇(14 个视频) 诱人的 react 视频教程 - 基础篇 #1 介绍「07:25」 诱人的 react 视频教程 - 基础篇 #2 create-react-ap ...
- 从0开始搭建SQL Server AlwaysOn 第一篇(配置域控)
从0开始搭建SQL Server AlwaysOn 第一篇(配置域控) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnb ...
- Python爬虫小白入门(四)PhatomJS+Selenium第一篇
一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...
- Three.js 第一篇:绘制一个静态的3D球体
第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- Android基础学习第一篇—Project目录结构
写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...
- 深入理解ajax系列第一篇——XHR对象
× 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...
- 深入理解javascript对象系列第一篇——初识对象
× 目录 [1]定义 [2]创建 [3]组成[4]引用[5]方法 前面的话 javascript中的难点是函数.对象和继承,前面已经介绍过函数系列.从本系列开始介绍对象部分,本文是该系列的第一篇——初 ...
随机推荐
- [PC]PHPCMS v9.5.6整合UEditer1.4.2
----------------------------------------------------------------------------------------------- 首先去U ...
- javascript原型链中 this 的指向
为了弄清楚Javascript原型链中的this指向问题,我写了个代码来测试: var d = { d: 40 }; var a = { x: 10, calculate: function (z) ...
- SVN 报错“Previous operation has not finished; run 'cleanup' if it was interrupted” 原因及解决方案
今天遇到的问题 svn无论是执行checkout,commit,update的时候提示需要cleap up,但 svn执行clean up命令时报错“Previous operation has no ...
- hdu4497-GCD and LCM-(欧拉筛+唯一分解定理+组合数)
GCD and LCM Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others)Total ...
- CSS 边框图像
border-image border-image 可以将图像应用到盒子的边框上. border-image 属性需要3个值同时存在: URL 图片的地址 切割图片的位,4个边需要写4个值 如何处理边 ...
- spring .cloud ------------java.lang.RuntimeException: com.netflix.client.ClientException,Caused by: java.lang.IllegalArgumentException: MIME type may not contain reserved characters
1.问题的发生 Feign在默认情况下使用的是JDK原生的URLConnection发送HTTP请求,没有连接池,但是对每个地址会保持一个长连接,即利用HTTP的persistence connect ...
- JAVA集合操作异常 ---------Collections.unmodifiableCollection
1.问题原因 这两天在做开发的时候,在一个首页的列表哪里操作了ArrayList集合,在做递归删除的时候用的是Iterator对象(至于为什么用,来个链接https://blog.csdn.net/m ...
- 启用mongodb授权认证
linux下 1.以–auth 启动mongod 2.在配置文件mongod.conf 中加入 auth = true
- 云笔记项目-测试时无法连接MySQL Server
事情起因:用Mac提交云笔记项目到SVN后,使用台式机import SVN上的云笔记代码,发现到了台式机上,进行junit测试时无法连接Mysql数据库服务器,而Mac上是可以的.以下是报警内容和报警 ...
- unittest测试
标签(空格分隔): unittest unittest介绍: python里面也有单元测试框架-unittest,相当于是一个python版的junit. 一.unittest简介 1.先导入unit ...