react-router4 第一篇
2017-04-11 15:54
204 查看
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$/, // 这个是错的,无法导入css,导入就报错,,哪位大神看到了欢迎留言告诉我。。 exclude: /node_modules/, use: [{ loader: "babel-loader", options: {presets: ["style-loader", "css-loader"]} }] // 其中css-loader用于解析,而style-loader则将解析后的样式嵌入js代码。 } ] }, 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
http://www.cnblogs.com/daowangzhizhu-pt/p/6652764.html
相关文章推荐
- react-router初用
- react-router 4.0版本使用笔记
- react+redux+react-router4配置过程
- React Router页面传值的三种方法
- React-router(4)props 路由信息
- react-router4 实现按需加载并利用withRouter传递props
- react-router
- Webpack懒加载React Router的页面组件
- React-router v4教程
- react-router的 <Link/>中的属性
- 基于react-router的单页应用
- react-router 从 v2/v3 to v4 迁移
- 最完整的React+Redux+router兼容ie8 修改!!!!
- React Router context.router 未定义错误
- react-router 4.0 格式化文档
- React全家桶之react-router(二)
- react-router学习
- React-Router传参取值页面跳转
- react-router 获取路由参数
- 【React-Router】关于browserHistory出现did not match any routes的问题