小编spi*_*k3s的帖子

在React-Router v4中以编程方式导航

我等不及了,我开始使用react-routerv4 的最新alpha版本.全新<BrowserRouter/>功能非常适合保持您的UI与浏览器历史记录同步,但如何使用它以编程方式进行导航?

reactjs react-router

32
推荐指数
7
解决办法
4万
查看次数

路线更改时更新Redux状态

我一直试图弄清楚这一点,我越来越困惑.

我想在每次离开或改变路线时重置/改变Redux状态.我使用react-router-redux与history.listener调度的动作,每次路由变化

history.listen(location => store.dispatch(resetManualsCategory()));
Run Code Online (Sandbox Code Playgroud)

行动创造者:

export function resetManualsCategory() {
    return {
        type: 'RESET_MANUALS_CATEGORY'
    }
}
Run Code Online (Sandbox Code Playgroud)

减速器

export function manualCategories(state=[], action) {
    switch (action.type) {
        case 'SELECT_MANUALS_CATEGORY':
           [...]

        case 'RESET_MANUALS_CATEGORY':
            console.log('test reducer');
            return Object.assign({}, state, {
                manualCategory: 'test'
            })

        default:
            return state
    }
}
Run Code Online (Sandbox Code Playgroud)

令我困惑的是,如果我刷新页面或在顶部导航中的路线上单击两次,状态会更新,但是单个路径更改不会影响redux状态,即使操作和reducer触发(显示测试消息)控制台).

我做错了什么,这里到底发生了什么?

reactjs redux react-router-redux

6
推荐指数
2
解决办法
1万
查看次数

React和Webpack:加载和显示图像作为背景图像

我正在创建一个类似横幅的组件,图像设置为组件的背景,但我无法让它工作.我尝试了网上发布的不同建议,但没有运气,目前我不确定我的错误是否在反应代码中,或者是没有正确加载文件的webpack.

这是我的文件结构:

AppFolder
 - client/
 -- components/
 -- data/
 -- images/
 ----- banners/
 ------- frontPageBanner2.png
    ------- 
 -- styles/
 -- myApp.js
 -- store.js
    ---------
 - index.html
 - package.json
 - webpack.config.dev.js
Run Code Online (Sandbox Code Playgroud)

这是我的webpack配置:

var path = require('path'); 
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/myApp'
  ],
  output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel'],
      presets: ['es2015', …
Run Code Online (Sandbox Code Playgroud)

image reactjs webpack

4
推荐指数
1
解决办法
8167
查看次数