react-route，react-hot-loader.webpack（你不能改变<路由器路由&gt ;;它将被忽略） [英] react-route,react-hot-loader.webpack (You cannot change <Router routes>; it will be ignored)

问题描述

这是我的第一个项目，使用 react ， react-router ， react-hot -loader ， webpack-dev-server 和 webpack 。当我更改react组件中的代码时，hot-loader会生效，但同时，控制台会告诉我一个警告：

it's my first project that use react,react-router,react-hot-loader,webpack-dev-server and webpack. when I change the code in react component, the hot-loader become effective, but at the same time, the console tell me a warning:

您无法更改路由器路由;它将被忽略。

You cannot change 《Router routes》; it will be ignored.

我不知道如何解决这个问题。有代码：

I don't know how to solve this issue.there is code:

webpack代码：

webpack code:

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

    module.exports = {
      devtool: 'source-map' ,
      entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './jsx/index'
      ],
      output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
        publicPath: '/public/'
      },
      plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
      ],
      resolve: {
        extensions: ['', '.js', '.jsx', 'json']
      },
      module: {
        loaders: [{
          test: /\.js$/,
          exclude: /node_modules/,   
          loaders: ['react-hot', 'babel'],
          }]
      },
      watch:true
    };

索引代码：

    import React from 'react'
    import ReactDOM  from 'react-dom'
    import { Router, Route, Link } from 'react-router'
    import App from './index/app'
    import About from './index/about'
    import Inbox from './index/inbox'
    class Routers extends React.Component {
      render() {
         return ( 
            <Router>
                <Route path="/" component={App}>
                  <Route path="about" component={About} />
                  <Route path="inbox" component={Inbox} />
                </Route>
            </Router>
          );
        }
    }

ReactDOM.render(<Routers />, document.getElementById('root'));

谢谢!!!!

推荐答案

只有你需要做的事情，就是抛出< Route /> 从render（）方法出来。

所以，有很多方法可以解决这个问题。

大多数官方方式是@Stormy说的。

我的解决方案是这样的：

Only thing you need to do, it's to throw <Route /> out of render() method.
So, there are many ways to solve this issue.
Most Official way is what @Stormy say.
My solution like this:

const routes = (
  <Route path="/" component={App}>
    <Route path="about" component={About} />
    <Route path="inbox" component={Inbox} />
  </Route>
)

// Don't let <Route> in render() method
class Routers extends React.Component {
  render() {
     return ( 
        <Router>
          { routes }
        </Router>
      );
    }
}

这篇关于react-route，react-hot-loader.webpack（你不能改变<路由器路由&gt ;;它将被忽略）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！