无奈,英语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 第一篇的更多相关文章

  1. AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX

    AntDesign-React与VUE有点不一样,第一篇深入了解React的概念之一:JSX 一.什么是JSX 使用JSX声明一个变量(REACT当中的元素): const element =< ...

  2. 诱人的 react 视频教程-基础篇(14 个视频)

    诱人的 react 视频教程-基础篇(14 个视频) 诱人的 react 视频教程 - 基础篇 #1 介绍「07:25」 诱人的 react 视频教程 - 基础篇 #2 create-react-ap ...

  3. 从0开始搭建SQL Server AlwaysOn 第一篇(配置域控)

    从0开始搭建SQL Server AlwaysOn 第一篇(配置域控) 第一篇http://www.cnblogs.com/lyhabc/p/4678330.html第二篇http://www.cnb ...

  4. Python爬虫小白入门(四)PhatomJS+Selenium第一篇

    一.前言 在上一篇博文中,我们的爬虫面临着一个问题,在爬取Unsplash网站的时候,由于网站是下拉刷新,并没有分页.所以不能够通过页码获取页面的url来分别发送网络请求.我也尝试了其他方式,比如下拉 ...

  5. Three.js 第一篇:绘制一个静态的3D球体

    第一篇就画一个球体吧 首先我们知道Three.js其实是一个3D的JS引擎,其中的强大之处就在于这个JS框架并不是依托于JQUERY来写的.那么,我们在写这一篇绘制3D球体的文章的时候,应该注意哪些地 ...

  6. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  7. 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  8. Android基础学习第一篇—Project目录结构

    写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对 ...

  9. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

  10. 深入理解javascript对象系列第一篇——初识对象

    × 目录 [1]定义 [2]创建 [3]组成[4]引用[5]方法 前面的话 javascript中的难点是函数.对象和继承,前面已经介绍过函数系列.从本系列开始介绍对象部分,本文是该系列的第一篇——初 ...

随机推荐

  1. HttpURLConnection 添加代理

    //创建代理服务器 Proxy proxy = new Proxy(Proxy.Type.HTTP, new InetSocketAddress("www.proxyaddress.com& ...

  2. java实现excel表格导出

    Java 实现导出excel表 POI 1.首先下载poi-3.6-20091214.jar,下载地址如下: http://download.csdn.net/detail/evangel_z/389 ...

  3. 11.枚举类.md

    目录 1.定义: 2.枚举类和普通类的区别: 2.1枚举类的简单构建: 2.2枚举类的成员变量.方法和构造 2.3实现接口的枚举类 1.定义: 2.枚举类和普通类的区别: 枚举类的默认修饰符是 pub ...

  4. google image

    google图片抓取 google图片是base64加密的,而且base64后的信息放在script信息里面 import pymysql from lxml import etree import ...

  5. <assert.h>库学习

    assert的初步认识 assert宏指令是用来诊断程序是否有误的,函数原型如下 void assert(int expression) 那为什么我们要使用assert而不用printf呢?因为ass ...

  6. SQL Server 事件探查器和数据库引擎优化顾问

    简介 说到Sql的[性能工具]真是强大,SQL Server Profiler的中文意思是SQL Server事件探查,这个到底是做什么用的呢?我们都知道探查的意思大多是和监视有关,其实这个SQL S ...

  7. Jenkins+svn+ant+tomcat持续集成

    转载自 http://www.cnblogs.com/liuhaixia/p/7267473.html Jenkins是基于Java开发的一种持续集成工具,用于监控秩序重复的工作.通过Jenkins+ ...

  8. Fiddler抓包域名过滤(转载)

    转载自 http://www.cnblogs.com/111testing/p/6440480.html Fiddler抓包域名过滤 我们在用Fiddler抓包的时候会抓到很多不需要的数据包,我们怎样 ...

  9. PHP实现curl和snoopy类模拟登陆方法

    Snoopy.class.php下载 方法/步骤   第一种:使用snoopy类实现模拟登陆 1.在网上下载一个Snoopy.class.php的文件   2.代码实现: <?php set_t ...

  10. CentOS 查看是否安装软件包

    1. rpm包安装的,可以用rpm -qa看到,如果要查找某软件包是否安装,用 rpm -qa | grep "软件或者包的名字" 2. deb包安装的,可以用dpkg -l能看到 ...