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>&nbsp;

                <NavLink to="/Shop" activeClassName="selected" exact>商城</NavLink>&nbsp;

                <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 路由跳转的更多相关文章

  1. < react router>: (路由)

    < react router> (路由): 思维导图: Atrial   文件夹下的index.js 文件内容: import React, { Component } from 'rea ...

  2. React初识整理（四）--React Router(路由)

    官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...

  3. vue -- router路由跳转错误 , NavigationDuplicated

    vue-router ≥3.0版本回调形式以及改成promise api的形式了,返回的是一个promise,如果路由地址跳转相同, 且没有捕获到错误,控制台始终会出现如图所示的警告 (注:3.0以下 ...

  4. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  5. react中路由跳转push与replace的区别

    路由跳转,replace / push 区别 push: a-b-c 可以回到上一级 例: this.props.history.push('路由地址') replace: a-b-c 回不到上一级 ...

  6. React native路由跳转navigate、push、replace的区别

    由于没有系统的去学习RN,对路由跳转了解不多,只是跟着项目在做,抽点时间简单学习一下RN路由跳转方法区别,总结如下: 如上图,外部是一个栈容器,此时A页面在最底部,navigate到B页面,为什么此时 ...

  7. react ---- Router路由的使用和页面跳转

    React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...

  8. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  9. 【react router路由】<Router> <Siwtch> <Route>标签

    博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...

  10. vue router路由跳转了，但是页面没有变（已解决）

    小白学习 router.js:两个组件之间跳转 但是路由变了,页面没有改变的原因是因为app.vue里面没有router-view(很关键)

随机推荐

  1. Java 第十一届 蓝桥杯 省模拟赛 第十层的二叉树

    一棵10层的二叉树,最多包含多少个结点? 注意当一棵二叉树只有一个结点时为一层. 答案提交 这是一道结果填空的题,你只需要算出结果后提交即可.本题的结果为一个整数,在提交答案时只填写这个整数,填写多余 ...

  2. Java实现 LeetCode 912 排序数组（用数组去代替排序O(N)）

    912. 排序数组 给你一个整数数组 nums,将该数组升序排列. 示例 1: 输入:nums = [5,2,3,1] 输出:[1,2,3,5] 示例 2: 输入:nums = [5,1,1,2,0, ...

  3. Java实现 LeetCode 417 太平洋大西洋水流问题

    417. 太平洋大西洋水流问题 给定一个 m x n 的非负整数矩阵来表示一片大陆上各个单元格的高度."太平洋"处于大陆的左边界和上边界,而"大西洋"处于大陆的 ...

  4. Java实现 LeetCode 162 寻找峰值

    162. 寻找峰值 峰值元素是指其值大于左右相邻值的元素. 给定一个输入数组 nums,其中 nums[i] ≠ nums[i+1],找到峰值元素并返回其索引. 数组可能包含多个峰值,在这种情况下,返 ...

  5. java实现 洛谷 P1425 小鱼的游泳时间

    题目描述 伦敦奥运会要到了,小鱼在拼命练习游泳准备参加游泳比赛,可怜的小鱼并不知道鱼类是不能参加人类的奥运会的. 这一天,小鱼给自己的游泳时间做了精确的计时(本题中的计时都按24小时制计算),它发现自 ...

  6. 重学 Java 设计模式：实战外观模式「基于SpringBoot开发门面模式中间件，统一控制接口白名单场景」

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 你感受到的容易,一定有人为你承担不容易 这句话更像是描述生活的,许许多多的磕磕绊绊总 ...

  7. Jackson乱码问题

    在配置文件中加入下面的内容 <!-- Json乱码问题配置--> <mvc:annotation-driven> <mvc:message-converters regi ...

  8. [转] 浅谈C++中的那些内存泄露

    点击阅读原文 尽管学过C语言.可是C++里面的一些基础还是不太懂,还须要再掌握. 对于内存泄露,我的个人理解就是程序在执行过程中,自己开辟了空间,用完这块空间后却没有释放. 今晚上我就犯了这种低级错误 ...

  9. [LOJ#500]「LibreOJ β Round」ZQC的拼图

    题目   点这里看题目. 分析   首先不难发现答案具有单调性,因此可以二分答案.答案上限为\(V=2m\times \max\{a_i, b_i\}\).   考虑如何去判断当前的答案.设这个答案为 ...

  10. 「JOISC 2020 Day4」首都城市

    题目   点这里看题目. 分析   做法比较容易看出来.我们对于每个城市,找出那些 " 如果这个城市在首都内,则必须在首都内的其它城市 " ,也就是为了让这个城市的小镇连通而必须选 ...