webpack4.X + react-router 路由跳转
webpack4.X react-router
环境准备工作：windows7、webStorm 2017.1.4、Nodejs 8.7.0、npm 5.4.2
PS:安装的时我们都带上版本，这样即便webpack版本发生变化，也不会出现版本问题。
初始化package.json文件
npm init
npm安装react、react-dom包
npm install react@16.3.0 react-dom@16.3.0 --save
或者
npm i -S react@16.3.0 react-dom@16.3.0
npm安装webpack、webpack-cli等包
npm install webpack@4.4.1 webpack-cli@2.0.13 webpack-dev-server@3.1.1 webpack-merge@4.1.2 babel-cli@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24.1 babel-preset-react-hmre@1.1.1 babel-loader@7.1.4 --save-dev
或者
npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-dev-server@3.1.1 webpack-merge@4.1.2 babel-cli@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24.1 babel-preset-react-hmre@1.1.1 babel-loader@7.1.4
安装 react-router-dom
npm install react-router-dom --save-dev
或者
npm i -S react-router-dom
文件夹结构
各个文件的内容
src => views => home => Index.jsx
import React from 'react';
class Index extends React.Component {
render() {
return (
<div>
首页
</div>
);
}
}
export default Index;
src => views => me => Index.jsx
import React from 'react';
class Index extends React.Component {
render() {
return (
<div>
个人中心
</div>
);
}
}
export default Index;
src => views => shop => Index.jsx
import React from 'react';
class Index extends React.Component {
render() {
return (
<div>
商城
</div>
);
}
}
export default Index;
src => views => Index.jsx
import React from 'react';
import {HashRouter, Route, NavLink} from 'react-router-dom'
import Me from './me/Index'
import Shop from './shop/Index'
import Home from './home/Index'; const Index = () =>
<HashRouter>
<div>
<div className="nav">
<NavLink to="/Home" activeClassName="selected" exact>首页</NavLink>
<NavLink to="/Shop" activeClassName="selected" exact>商城</NavLink>
<NavLink to="/Me" activeClassName="selected" exact>个人中心</NavLink>
</div>
<Route path="/Shop" component={Shop}/>
<Route path="/Me" component={Me}/>
<Route path="/Home" component={Home}/>
</div>
</HashRouter> export default Index;
src => index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Index from './views/Index'; ReactDOM.render(<Index/>, document.getElementById('app'));
static => index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="telephone=no" name="format-detection">
<title>react-router</title>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src=js/index.js></script>
</body>
</html>
webpack => base.config.js
let config = {
entry: {
'index':'./src/index.js'
},
resolve: {
extensions: [".js", ".json", ".jsx", ".css"],
}
};
module.exports = config;
webpack => dev.config.js
const webpack = require('webpack');//引入webpack
const opn = require('opn');//打开浏览器
const merge = require('webpack-merge');//webpack配置文件合并
const path = require("path");
const baseWebpackConfig = require("./base.config");//基础配置
const webpackFile = require("./file.config");//一些路径配置
let config = merge(baseWebpackConfig, {
/*设置开发环境*/
mode: 'development',
output: {
path: path.resolve(webpackFile.devDirectory),
filename: 'js/[name].js',
chunkFilename: "js/[name].js",
publicPath: ''
},
plugins: [
/*设置热更新*/
new webpack.HotModuleReplacementPlugin(),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: [
'babel-loader',
],
include: [
path.resolve(__dirname, "../src")
],
exclude: [
path.resolve(__dirname, "../node_modules")
],
}
]
},
/*设置api转发*/
devServer: {
host: '0.0.0.0',
port: 8080,
hot: true,
inline: true,
contentBase: path.resolve(webpackFile.devDirectory),
historyApiFallback: true,
disableHostCheck: true,
proxy: [
{
context: ['/api/**', '/u/**'],
target: 'http://127.0.0.1:8080/',
secure: false
}
],
/*打开浏览器 并打开本项目网址*/
after() {
opn('http://localhost:' + this.port);
}
}
});
module.exports = config;
webpack => file.config.js
module.exports = {
devDirectory:'static',/*开发目录*/
proDirectory:'dist',/*发布目录*/
resource:'resource',/*静态资源*/
};
运行效果
项目地址：https://github.com/yangbiaoit/react-webpack/tree/master/02
webpack4.X + react-router 路由跳转的更多相关文章
- < react router>: (路由)
< react router> (路由): 思维导图: Atrial 文件夹下的index.js 文件内容: import React, { Component } from 'rea ...
- React初识整理（四）--React Router(路由)
官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...
- vue -- router路由跳转错误 , NavigationDuplicated
vue-router ≥3.0版本回调形式以及改成promise api的形式了,返回的是一个promise,如果路由地址跳转相同, 且没有捕获到错误,控制台始终会出现如图所示的警告 (注:3.0以下 ...
- react router路由传参
今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...
- react中路由跳转push与replace的区别
路由跳转,replace / push 区别 push: a-b-c 可以回到上一级 例: this.props.history.push('路由地址') replace: a-b-c 回不到上一级 ...
- React native路由跳转navigate、push、replace的区别
由于没有系统的去学习RN,对路由跳转了解不多,只是跟着项目在做,抽点时间简单学习一下RN路由跳转方法区别,总结如下: 如上图,外部是一个栈容器,此时A页面在最底部,navigate到B页面,为什么此时 ...
- react ---- Router路由的使用和页面跳转
React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...
- React Router路由传参方式总结
首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...
- 【react router路由】<Router> <Siwtch> <Route>标签
博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...
- vue router路由跳转了，但是页面没有变（已解决）
小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)
随机推荐
- Spring （ 五 ）Spring之数据访问与事务管理
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一.Spring之数据访问 1.Spring数据访问工程环境搭建 jdbc.properties配置 ...
- Java实现 LeetCode 559 N叉树的最大深度（遍历树，其实和便利二叉树一样，代码简短(●ˇ∀ˇ●)）
559. N叉树的最大深度 给定一个 N 叉树,找到其最大深度. 最大深度是指从根节点到最远叶子节点的最长路径上的节点总数. 例如,给定一个 3叉树 : 我们应返回其最大深度,3. 说明: 树的深度不 ...
- java实现罗马数字转十进制
古罗马帝国开创了辉煌的人类文明,但他们的数字表示法的确有些繁琐,尤其在表示大数的时候,现在看起来简直不能忍受,所以在现代很少使用了.之所以这样,不是因为发明表示法的人的智力的问题,而是因为一个宗教的原 ...
- java实现第六届蓝桥杯机器人数目
机器人数目 少年宫新近邮购了小机器人配件,共有3类,其中, A类含有:8个轮子,1个传感器 B类含有: 6个轮子,3个传感器 C类含有:4个轮子,4个传感器 他们一共订购了100套机器人,收到了轮子6 ...
- java实现第四届蓝桥杯有理数类
有理数类 题目描述 有理数就是可以表示为两个整数的比值的数字.一般情况下,我们用近似的小数表示.但有些时候,不允许出现误差,必须用两个整数来表示一个有理数. 这时,我们可以建立一个"有理数类 ...
- 【CSS】常用色值
常用颜色: 嫣红(red):#e54d42 桔橙(orange):#f37b1d 明黄(yellow):#fbbd08 橄榄(olive):#8dc63f 森绿(green):#39b54a 天青(c ...
- zabbix 监控 tcp 连接数
一.zabbix-agent 服务器配置 1.编辑zabbix_agent配置文件,添加以下内容 vim /etc/zabbix/zabbix_agentd.conf ##添加此行 UserParam ...
- zabbix通过Web场景监控URL
选择主机添加应用集 添加Web监控 选在相应主机,并添加Web监控 按照方式新建Web场景 注意: 名称统一规则:相应的域名 应用集:选择之前创建的 或者 新建一个,名称为“URL 告警” ...
- 在WinForms里嵌入MediaPlayer的一些版本问题, tlbimp导入, 以及不导入而纯用C#+字符串来动态调用.
网上很多写使用WindowsMediaPlayer WMP控件的文章. 大多数都是从工具栏或COM导入. 最近正在做的CEF整合Asp.Net Core Blazor server side的过程中, ...
- Lavarel 执行：php artisan migrate时报错
错误如下: 执行:php artisan migrate时报错: [PDOException]SQLSTATE[HY000] [2002] Connection refused 解决办法: 第一步:. ...