React-Router on Dapeng Zhang

Webpack4+React16+ReactRouter4 - historyApiFallback 多级路由

Mon, 07 Jul 2025 15:48:44 +0000

之前的几篇文章写的很多，里面在开发环境下都用到了

historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
},

但是在我们开发也许会遇到一个很奇怪的问题就是，当我们访问到二级以上的路由的情况下，在刷新页面会发现页面加载不出需要的js,此时会显示一个404，说文件不存在，但是仔细看的话发现加载的js路径不对呀，正常来说js的加载是在/下面的,如、xxx.js，但是当我们访问到比如/topics/1的时候，js请求的路径就变成了/topics/xxx.js，这个问题根据经验来说应该是html-webpack-plugin的原因，因为它在帮我们加入js文件的时候应该给我们一个base的参数，但是我也没有找到类似这样的参数，或者其他配置可以解决这个问题，最终让我追溯到了webpack的配置中output的选项中，其中有个publicPath这个选项

文档中的意思是

该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀。因此，在多数情况下，此选项的值都会以/结束。

那么我们就来设置下

output: {
 filename: '[name].bundle.js',
 chunkFilename: '[chunkhash].bundle.js',
 path: path.resolve(__dirname, 'dist'),
},

中加入

publicPath: '/',

结果如下

output: {
 filename: '[name].bundle.js',
 chunkFilename: '[chunkhash].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 publicPath: '/',
},

保存后重启webpack-dev-server

npm start

然后再去刷新，发现问题得到了解决。在任何页面进行刷新就能保证正常的加载到js文件。

项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.5

Webpack4+React16+ReactRouter4+Redux整合开发 - Redux Logger日志相关配置

Fri, 04 Jul 2025 14:27:37 +0000

之前的几篇文章继承了redux，这里不得不说下与redux开发相关的一些配置redux-logger，其实有很多，也有另外一种方式，这里我觉得这个是比较好的，这里做下记录，跟大家分享下。

首先clone代码

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git redux-devtools
cd redux-devtools
npm install 

npm start

然后安装redux-logger

npm install redux-logger

打开src/index.jsx
引入redux-logger

import { createLogger } from 'redux-logger';

更新修改代码结果如下

const middleware = [];
if (typeof __DEV__ !== 'undefined') {
 middleware.push(createLogger()); // 创建日志
}
// 为了添加多个中间件 我们重新改造middleware
middleware.push(routerMiddleware(history));

// 这行是DevTools的配置 后面做详细说明
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(...middleware)), // 中间件引入
);

日志一般是在开发环境中使用，我们需要加个变量来做下控制，这里通过修改webpack.config.js中的plugins加入

new webpack.DefinePlugin({
 'global.GENTLY': false,
 __DEV__: true,
})

配置完结果如下

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 entry: {
 app: [
 'webpack/hot/only-dev-server',
 'react-hot-loader/patch',
 './src/index.jsx',
 ],
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy', 'react-hot-loader/babel'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 alias: {
 Actions: path.resolve(__dirname, 'src/actions'),
 },
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 const {
 plugins,
 } = config;
 plugins.push(new webpack.DefinePlugin({
 'global.GENTLY': false,
 __DEV__: true,
 }));
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 devServer: {
 hot: true,
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
 },
 },
 plugins,
 });
}

module.exports = config;

重新执行

npm start

打开计数器，通过chrome的devtools可以看到类似如下图的日志，这样我们在做数据交互的时候就能清晰的了解到具体的数据调用情况

这里前提说下，Chrome浏览器最好是安装下redux的Chrome扩展，不知道的可自行百度或google下，后面的文章有需要的话，在详细说下。

实践项目地址

https://github.com/durban89/webpack4-react16-reactrouter-demo.git

tag:v_1.0.3

Webpack4+React16+ReactRouter4+Redux整合开发 - react-hot-loader

Fri, 04 Jul 2025 14:27:34 +0000

继续上篇文章【Webpack4+React16+ReactRouter4+Redux整合开发】继续分享，这里我们针对细节的部分做下优化，主要是能更加高效的提升我们的开发效率

1、clone 实例代码并将代码运行起来

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git react-hot-loader-demo && cd react-hot-loader-demo

npm install

2、运行项目

npm start

3、修改webpack.config.js

修改webpack-dev-server的配置，添加

hot: true

结果如下

devServer: {
 hot: true,
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
 },
},

修改entry

entry: {
 app: [
 'webpack/hot/only-dev-server', // 这里新加
 'react-hot-loader/patch', // 这里新加
 './src/index.jsx',
 ],
},

修改module中rule部分

{
 test: /\.(js|jsx)$/,
 loader: [
 'babel-loader',
 'react-hot-loader/webpack',
 ],
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
}

修改src/index.jsx
将原来的

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

替换为

const render = () => {
 ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <App history={history} />
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
 );
};

render();

if (module.hot) {
 module.hot.addStatusHandler((status) => {
 console.log('status = ', status);
 });

 module.hot.accept('./App', () => {
 // 这里是当前版本很重要的环节，不然的话react-hot-reload不起作用
 require('./App').default;
 render();
 });

 module.hot.accept('./reducers', () => {
 store.replaceReducer(connectRouter(history)(rootReducer));
 render();
 });
}

添加src/App.jsx

import React from 'react';
import PropTypes from 'prop-types';
import { ConnectedRouter } from 'connected-react-router';
import routes from './routes';

const App = ({ history }) => (
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
);

App.propTypes = {
 history: PropTypes.objectOf(PropTypes.any).isRequired,
};

export default App;

最后一个package.json中start命令修改

"start": "npx webpack-dev-server --open --hot"

最后重启项目

npm start

试着改改UI，会有神奇的效果

实践环境具体版本以项目的package.json为准

os: mac
node: v8.9.4

项目地址
https://github.com/durban89/webpack4-react16-reactrouter-demo.git
TAG: v_1.0.2

Webpack4+React16+ReactRouter4+Redux整合开发

Fri, 04 Jul 2025 14:27:31 +0000

续接上文【Webpack4+React16+ReactRouter4整合开发】

拉取github代码
https://github.com/durban89/webpack4-react16-reactrouter-demo.git

git clone https://github.com/durban89/webpack4-react16-reactrouter-demo.git webpack4-react16-reactrouter-redux
cd webpack4-react16-reactrouter-redux
npm install 
npm start

如果没有异常就可以正常写代码了

首先看下react-router-redux，从react-router官网的redux介绍部分可以看出写的是React Router Redux，但是点击后会告诉你Deprecated。我的天！废弃了，好吧，然后下面告诉你connected-react-router
我的天，又造了一个轮子，看来要重头学起了，没关系，咱们就是不怕折腾，人活着就是折腾嘛。
我们链接到connected-react-router，各种的炫耀夸，太多了，各种优点，我们还是来点实际的，操作开始

npm install redux react-redux history react-hot-loader connected-react-router --save

如何使用
修改src/index.jsx

1、第一步
添加第一部分 - 导入使用的库函数

import { AppContainer } from 'react-hot-loader';
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { Provider } from 'react-redux';
import { connectRouter, ConnectedRouter, routerMiddleware } from 'connected-react-router';

添加第二部分 - 需要自己去定义

import rootReducer from './reducers'; // 这里的文件是新加的 - 具体是如何创建的可以看下项目代码
import routes from './routes'; // 这里的文件是新加的 - 具体是如何创建的可以看下项目代码

添加第三部分 - 配置redux相关的逻辑

const history = createBrowserHistory();
const initialState = {};
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(routerMiddleware(history))),
);

添加第四部分 - 整合react-router

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

最终src/index.jsx内容如下

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { Provider } from 'react-redux';
import { connectRouter, ConnectedRouter, routerMiddleware } from 'connected-react-router';
import ReactDOM from 'react-dom';
import rootReducer from './reducers';
import routes from './routes';

const history = createBrowserHistory();
const initialState = {};
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 connectRouter(history)(rootReducer),
 initialState,
 composeEnhancer(applyMiddleware(routerMiddleware(history))),
);

ReactDOM.render(
 (
 <AppContainer>
 <Provider store={store}>
 <ConnectedRouter history={history}>
 {routes}
 </ConnectedRouter>
 </Provider>
 </AppContainer>
 ),
 document.getElementById('root'),
);

src/routes.jsx 主要配置路由跟组件的关系 -> 上面这行import routes from ‘./routes’;代码

import React from 'react';
import {
 BrowserRouter as Router,
 Route,
 Link as ALink,
} from 'react-router-dom';

import AppComponent from './components/AppComponent';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';
import TopicsComponent from './components/TopicsComponent';

const routes = (
 <div>
 <Router>
 <AppComponent>
 <ul>
 <li><ALink to="/">首页</ALink></li>
 <li><ALink to="/about">关于</ALink></li>
 <li><ALink to="/topics">论题</ALink></li>
 </ul>
 <hr />

 <Route exact path="/" component={HomeComponent} />
 <Route path="/about" component={AboutComponent} />
 <Route path="/topics" component={TopicsComponent} />
 </AppComponent>
 </Router>
 </div>
);

export default routes;

2、第二步
配置好了，就要开始使用了
1】、创建reducers
src/reducers/counter.js

const counterReducer = (state = 0, action) => {
 switch (action.type) {
 case 'INCREMENT':
 return state + 1;
 case 'DECREMENT':
 return state - 1;
 default:
 return state;
 }
};

export default counterReducer;

2】、将counter.js加入到主reducers里面

src/reducers/index.js // 这里的文件就是对应这段代码 import rootReducer from './reducers';
import { combineReducers } from 'redux';
import counterReducer from './counter';

export default combineReducers({
 count: counterReducer,
});

3】、创建actions


export const increment = () => ({
 type: 'INCREMENT',
});

export const decrement = () => ({
 type: 'DECREMENT',
});

4】、添加一个组件src/components/CounterComponent.jsx

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { counter } from 'Actions';

const {
 increment, decrement,
} = counter;

class CounterComponent extends Component {
 constructor(props, context) {
 super(props, context);

 this.state = {};
 }

 render() {
 const {
 count,
 } = this.props;

 return (
 <div>
 <p>数值: {count}</p>
 <button onClick={this.props.doIncrement}>+</button>
 <button onClick={this.props.doDecrement}>-</button>
 </div>
 );
 }
}

CounterComponent.propTypes = {
 count: PropTypes.number,
 doIncrement: PropTypes.func.isRequired,
 doDecrement: PropTypes.func.isRequired,
};

CounterComponent.defaultProps = {
 count: 0,
};

const mapStateToProps = state => ({
 count: state.count,
});

const mapDispatchToProps = dispatch => ({
 doIncrement: () => dispatch(increment()),
 doDecrement: () => dispatch(decrement()),
});

export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);

5】、将组件加到路由里面

src/routes.js

import React from 'react';
import {
 BrowserRouter as Router,
 Route,
 Link as ALink,
} from 'react-router-dom';

import AppComponent from './components/AppComponent';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';
import TopicsComponent from './components/TopicsComponent';
import CounterComponent from './components/CounterComponent';

const routes = (
 <div>
 <Router>
 <AppComponent>
 <ul>
 <li><ALink to="/">首页</ALink></li>
 <li><ALink to="/about">关于</ALink></li>
 <li><ALink to="/topics">论题</ALink></li>
 <li><ALink to="/counter">计数器</ALink></li>
 </ul>
 <hr />

 <Route exact path="/" component={HomeComponent} />
 <Route path="/about" component={AboutComponent} />
 <Route path="/topics" component={TopicsComponent} />
 <Route path="/counter" component={CounterComponent} />
 </AppComponent>
 </Router>
 </div>
);

export default routes;

6】、为了引入方便再加一个src/actions/index.js

import counter from './counter';

const actions = {
 counter,
};

export default actions;
export { counter };

到这里基本上就完工了，应该可以在页面看到计数器，并进行操作了

import { counter } from 'Actions';

这里是比较特殊的
这个要归功于webpack

resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 alias: {
 Actions: path.resolve(__dirname, 'src/actions'),
 },
},

这里我们加了这个配置，于是在引入的时候就会正常引入需要的代码了。

好了，整个配置就完成了，项目我已经上传到github了，需要的同学可以自行去下载查看

实例项目地址:

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.1

Webpack4+React16+ReactRouter4整合开发

Fri, 04 Jul 2025 14:27:27 +0000

这次分享的内容有部分是跟之前的文章【webpack4手动配置安装react开发】大概类似，不同的是这次我们要结合reactr-router进行开发

1、创建项目并安装

mkdir webpack4_react16_reactrouter && cd webpack4_react16_reactrouter

npm init -y

npm install react react-dom prop-types react-router-dom

npm install webpack webpack-cli html-webpack-plugin clean-webpack-plugin webpack-dev-server eslint eslint-plugin-html eslint-plugin-react babel-eslint eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import babel-core babel-loader babel-plugin-transform-strict-mode babel-plugin-transform-object-assign babel-plugin-transform-decorators-legacy babel-preset-es2015 babel-preset-react babel-preset-stage-0 style-loader css-loader url-loader --save-dev

react开发需要用到的
babel相关的是用来做es5/es6语法解析的
eslint相关的是用来做语言检查的

2、eslint和webpack相关配置
.eslintrc

{
 "env": {
 "browser": true,
 "node": true,
 "es6": true,
 "jquery": true
 },
 "parser": "babel-eslint",
 "plugins": [
 "react",
 "html"
 ],
 "extends": [
 "airbnb"
 ],
 "rules": {
 "no-underscore-dangle": 0
 }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 entry: {
 app: ['./src/index.jsx'],
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 devServer: {
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 },
 });
}

module.exports = config;

index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>React + ReactRouter Demo</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <div id="root"></div>
</body>
</html>

基本上整个目录结构就搭建完了。还是蛮繁琐的，但是自己了解了其中整个逻辑及流程，对自己是有意的，不过说不好未来就成体系了，直接调用就好了，比如现在的create-react-app，可以直接帮你创建一个项目，很不错的一个选择。
但是搭建一个符合自己需求的更有价值。
基本的都弄完了，接下来如何使用ReactRouter呢，先从入口文件开始
src/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {
 BrowserRouter as Router,
 Route,
 Link as ALink,
} from 'react-router-dom';

import AppComponent from './components/AppComponent';
import HomeComponent from './components/HomeComponent';
import AboutComponent from './components/AboutComponent';
import TopicsComponent from './components/TopicsComponent';

ReactDOM.render(
 (
 <Router>
 <AppComponent>
 <ul>
 <li><ALink to="/">首页</ALink></li>
 <li><ALink to="/about">关于</ALink></li>
 <li><ALink to="/topics">论题</ALink></li>
 </ul>
 <hr />

 <Route exact path="/" component={HomeComponent} />
 <Route path="/about" component={AboutComponent} />
 <Route path="/topics" component={TopicsComponent} />
 </AppComponent>
 </Router>
 ),
 document.getElementById('root'),
);

基本上整个实例是参考了官网的实例，只是针对自己的需求做局部的调整，对于需要使用React开发的同学完全可以入手了，关于数据相关的后面再继续讨论。

这里有个很重要的点，就是在使用webpack-dev-server的使用，当你跳转到某个路由的时候，再刷新会发现页面提示找不到，这个问题这里介绍一个解决方案
historyApiFallback
只需要在webpack.config.js中配置下

historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
},

最终的文件结构如下

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

let config = {
 entry: {
 app: ['./src/index.jsx'],
 },
 plugins: [
 new CleanWebpackPlugin(['dist']),
 new HtmlWebpackPlugin({
 title: 'React + ReactRouter Demo',
 filename: './index.html', // 调用的文件
 template: './index.html', // 模板文件
 }),
 ],
 output: {
 filename: '[name].bundle.js',
 path: path.resolve(__dirname, 'dist'),
 },
 module: {
 rules: [{
 test: /\.(js|jsx)$/,
 loader: 'babel-loader',
 exclude: [
 path.resolve(__dirname, 'node_modules'),
 ],
 options: {
 plugins: ['transform-async-to-generator', 'transform-strict-mode', 'transform-object-assign', 'transform-decorators-legacy'],
 presets: ['es2015', 'react', 'stage-0'],
 },
 },
 {
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader',
 ],
 },
 {
 test: /\.(png|svg|jpg|gif)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(woff|woff2|eot|ttf|otf)$/,
 use: [
 'file-loader',
 ],
 },
 {
 test: /\.(csv|tsv)$/,
 use: [
 'csv-loader',
 ],
 },
 {
 test: /\.xml$/,
 use: [
 'xml-loader',
 ],
 },
 ],
 },
 resolve: {
 extensions: ['.js', '.jsx'], // 这里是必须要加的，不然默认的值加载['.js','.json']为后缀的文件
 },
};

if (process.env.NODE_ENV === 'production') {
 config = Object.assign({}, config, {
 mode: 'production',
 });
} else {
 config = Object.assign({}, config, {
 mode: 'development',
 devtool: 'eval',
 devServer: {
 contentBase: path.join(__dirname, 'dist'),
 compress: true,
 port: 8083,
 historyApiFallback: {
 rewrites: [{
 from: /^\/$/,
 to: './index.html',
 },
 ],
 },
 },
 });
}

module.exports = config;

在运行npm start，修改代码试试，这里强调下版本，如果你的版本比我的新的话，要自己去看下官网的api是否有调整

实例环境，拉取github代码，看package.json，一切尽在你掌握之中
实例项目地址:

https://github.com/durban89/webpack4-react16-reactrouter-demo.git
tag: v_1.0.0

react-router 之 routerWillLeave 实现自定义Dialog

Thu, 03 Jul 2025 11:59:44 +0000

react-router 可以在 react中起到路由的作用，同时也有一个routerWillLeave，这个函数帮助我们再处理路由的时候，离开某个路由要做的某个判断起到了很好的作用，但是version 2 才有这个功能，这里记录下如何自定自己弹出框。

由于react-router自带的功能不是很好，需要我们自己处理一下，于是google参考了stackoverflow上的一篇文章，先建立一个函数

function setAsyncRouteLeaveHook(router, route, hook) {
 let withinHook = false
 let finalResult = undefined
 let finalResultSet = false
 router.setRouteLeaveHook(route, nextLocation => {
 withinHook = true
 if (!finalResultSet) {
 hook(nextLocation).then(result => {
 finalResult = result
 finalResultSet = true
 if (!withinHook && nextLocation) {
 router.replace(nextLocation)
 }
 })
 }
 let result = finalResultSet ? finalResult : false
 withinHook = false
 finalResult = undefined
 finalResultSet = false
 return result
 })
}

原来的push，我这里改成了replace，为了适合我自己的逻辑。

然后添加一下routerWillLeave的逻辑

routerWillLeave(nextLocation) {
 //获取红包相关的信息
 
 return new Promise((resolve, reject) => {
 Popbox.pop({
 text: '你离使用红包只差一步之遥，确定放弃吗？',
 confirmBtnText: '继续绑卡',
 cancelBtnText: '放弃',
 cancelFunc: () => {
 resolve(true);
 },
 });
 })

 return false;
 }

这里是需要返回一个Promise的，所以自己的代码记得处理一下。

最后我们跟根据自己的逻辑来设置一下这个Hook。

我这里是放在了componentDidMount中做的处理

componentDidMount() {
 const { type } = this.props.params;
 
 if(type){
 setAsyncRouteLeaveHook(this.context.router, this.props.route, this.routerWillLeave);
 }
 }

好了，希望能帮到不了解英文的你，或者是找不到资料的你。

分享react-router实例

Wed, 02 Jul 2025 16:01:10 +0000

终于搞了一个大大的router：

ReactDOM.render((
 <Router history={browserHistory}>
 <Route path='/' component={PanelContainer} onEnter={Public.reactCheckLogin}>
 <IndexRoute component={DiagramListShow} />
 <Route path='panel/dataShow' component={DiagramListShow}/>
 <Route path='panel/diagramShow' component={DiagramShow}>
 <IndexRoute component={ApiDiagram}/>
 <Route path='apisum' component={ApiDiagram}/>
 <Route path='opensum' component={ OpenSum }/>
 <Route path='dayregister' component={ DayRegister }/>
 <Route path='activitysum' component={ ActivitySum }/>
 <Route path='recordsum' component={ RecordSum }/>
 <Route path='startsum' component={ StartSum }/>
 <Route path='downloadsum' component={ DownloadSum }/>
 <Route path='recordmoney' component={ RecordMoney }/>
 <Route path='recordnotice' component={ RecordNotice }/>
 <Route path='recordmulticurrency' component={ RecordMultiCurrency }/>
 <Route path='financeClickSum' component={ FinanceClickSum }/>
 <Route path='*' component={NoMatch}/>
 </Route>
 </Route>
 <Route path='/user' component={Container} onEnter={Public.reactCheckLogin}>
 <Route path='userinfo' component={UserInfo}/>
 </Route>
 <Route path='/manager' component={Container} onEnter={Public.reactCheckLogin}>
 <Route path='taskManage' component={TaskManage}/>
 <Route path='sqlManage' component={SqlManage}/>
 <Route path='oauthManage' component={oauthManage} />
 </Route>
 <Route path='/operation' component={Container} onEnter={Public.reactCheckLogin}>
 <Route path='typeinfo' component={Typeinfo}/>
 <Route path='listinfo' component={Listinfo}/>
 <Route path='financeNotice' component={FinanceNotice}/>
 </Route>
 <Route path='/panel/login' component={LoginRender} />
 </Router>
), document.getElementById('main-content'));

整理完后，感觉整个网站清晰多了.

这里有几个两点，一点是终于有办法可以判断进入某个路由的时候是否登录了。第二个两点是，之前的版本是在url后面添加hash，看起来很乱，这个版本的更新，从url上你完全看不出这个是用hash实现的。