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(很关键)
随机推荐
- 数据库之 MySQL --- 下载、安装 及 概述（一）
个人博客网:https://wushaopei.github.io/ (你想要这里多有) 一 . MySql数据库的安装 1.图解MySQL程序结构 2.双击运行安装程序:以Win32位为例 ...
- Java实现 LeetCode 442 数组中重复的数据
442. 数组中重复的数据 给定一个整数数组 a,其中1 ≤ a[i] ≤ n (n为数组长度), 其中有些元素出现两次而其他元素出现一次. 找到所有出现两次的元素. 你可以不用到任何额外空间并在O( ...
- Java实现 蓝桥杯VIP 算法训练 暗恋
算法训练 暗恋 时间限制:1.0s 内存限制:256.0MB 问题描述 同在一个高中,他却不敢去找她,虽然在别人看来,那是再简单不过的事.暗恋,是他唯一能做的事.他只能在每天课间操的时候,望望她的位置 ...
- Node第三方模块
node第三方模块集合 1.nrm 切换npm下载的镜像地址 nrm ls 查看可用镜像 nrm use +镜像名 2.nodemon 在控制台nodenom替代node命令执行nodejs文件, ...
- multimap遍历与查找
std::multimap<int, std::string> m; m.insert(std::make_pair(0, "w0")); m.insert(std:: ...
- iOS简历书写注意事项
1.个人信息模块 1)简历标题 2)姓名 性别 年龄 电话 邮箱 常驻地 学历 英语能力 工作年限 籍贯 专业 (突出优势) 注意:不要从招聘网站导出简历网站 2.求职意向 1)职位 地点 薪资 ...
- DML_Modifying Data Through Table Expressions_UPDATE
DML_Modifying Data Through Table Expressions_UPDATE之前也学习过使用CTE,再来泛泛的学习下,最后将会将一些书籍上或学习到的CTE来个小结 /* Mi ...
- [.NET 开源] 高性能的 Swifter.MessagePack 已发布，并附带新版本的 Swifter.Json 和 Swifter.Data。
抱歉各位朋友,由于各种私事公事,本应该在 19 年底发布的 Swifter.MessagePack 库延迟了这么久才发布,我深感抱歉. MsgPack 简介 MsgPack 一种非常轻巧的二进制数据交 ...
- 当小程序的flex布局遇到button时，justify-content不起作用的原因及解决方案
当小程序的flex布局遇到button时 发现justify-content不起作用,无论怎么设置都是space-around的效果. 经过排查,发现原因是小程序button中的默认样式中的margi ...
- 关于MYSQL的查询时间段、删除数据、查询目标行的命令用法。
Q1.第一次工作写命令时,写了一个把一个表的数据插入到另一个表中,运行时命令长时间处于执行状态. A.第一次处理数据库大量数据,长时间按运行属于正常现象,这与学校中的小数据不同. Q2.如何查询数据库 ...