React-Router和React-Hot-Loader.Webpack（您不能更改<Router routes>；它将被忽略）

Question

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

您不能更改“Router 路由”，它将被忽略。

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

webpack 代码：

    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'));

谢谢你!!!!

- Kevin_Z

---

请看 https://github.com/rackt/react-router/issues/2704 ... 相当多的人已经提出了这个问题，根据那里的建议，您可以尝试一些方法。 - Abhishek Jain

尝试在常量中定义路由以查看是否有效。我在我的项目中使用类似的设置，我没有看到这个错误消息。 - Abhishek Jain

@AbhishekJain，感谢您的回答。我已经查看了github.com/rackt/react-router/issues/2704，但是我无法从中找到解决方案。我不知道这个警告是否会对我的项目产生影响，即使react-router和hot-loader很有用。 - Kevin_Z

@AbhishekJain。哦，我的天啊。昨天我在一个常量中定义了路由，可能写错了什么地方，没有用。但刚才我再次尝试，它很有效。非常感谢！啊... - Kevin_Z

很酷...很高兴能帮助你！ - Abhishek Jain

Answer 1

您只需要将<Route />从render（）方法中移除即可。
因此，有许多种方法可以解决此问题。
最正式的方法是像@Stormy所说的那样。
我的解决方案如下：

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>
      );
    }
}

- Yancey Ou

---

我更喜欢这个解决方案。不管怎样，为什么会发生这种情况？我的代码即使有警告也能正常工作，但在控制台中出现任何类型的错误都很烦人。 - Kunok

Answer 2

尝试使用此配置 https://github.com/reactjs/react-router/issues/2704#issuecomment-170940448

请勿写解释，保留HTML标签。

  const routeConfig = [
  { path: '/:locale',
    component: App,
    indexRoute: { component: NewsCardsContainer },
    ...
  }
];
return (
  <IntlProvider key="intl" {...intlData}>
    <Router history={history} routes={routeConfig} />
  </IntlProvider>
)

- Stormy

Answer 3

我知道这是一个老问题，但有人可能会觉得这很有用。我尝试了很多东西，最终对我有用的是：

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 {
   private routes = (
      <Route path="/" component={App}>
          <Route path="about" component={About} />
          <Route path="inbox" component={Inbox} />
      </Route>
   );

   render() {
      return ( 
         <Router>
            {this.routes}
         </Router>
       );
    }
}

- Dimitar Dimitrov

Answer 4

我有相同的问题，我的解决方法是将 "import { Router, Route, Link } from 'react-router'" 改为 "import {HashRouter, Route, Link} from 'react-router-dom'" 我的代码：

ReactDOM.render((
    <HashRouter>
        <div>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/login">Login</Link></li>
            </ul>
            <hr/>

            <Route path="/" exact component={createComponent(Home)}/>
            <Route path="/login" component={createComponent(Login)}/>
        </div>
    </HashRouter>
), document.getElementById('root'));

- Vanctor

Answer 5

我的解决方案是将 "Reflux.Component" 更改为 "React.Component"。

class AppRouter extends Reflux.Component {
  constructor(props){
    super(props);
    this.store = AuthStore;
  }
  requireAuth (nextState, replace, callback) {

    if (nextState.location.pathname != '/login' && nextState.location.pathname != '/logout') {
      ActionsAuth.jwt.refresh();
    }
    const token = UtilsJWT().getToken();
    if (token){
      if (nextState.location.pathname == '/login') {

        window.location.href = '/main';
      }
      callback();
    }else{
      if (nextState.location.pathname != '/login') {
      window.location.href = '/login';
      }
    }
  }
  verifyAuth (nextState, replace, callback) {
    const token = UtilsJWT().getToken();
    if (token){
      if (nextState.location.pathname == '/login') {

        window.location.href = '/main';
      }
      callback();
    }else{
      if (nextState.location.pathname != '/login') {
        window.location.href = '/login';
      }
      callback();
    }
  }

  render(){
    return (
      <Router history={browserHistory}>
          <Route path="/" component={App}>
              <IndexRoute component={Login} onEnter={ this.verifyAuth }/>
              <Route path="login" component={Login} onEnter={ this.verifyAuth }/>
              <Route path="main" component={Main} onEnter={ this.requireAuth }/>
              <Route path="logout" component={Logout} onEnter={ this.requireAuth }/>
              <Route path="local-sync" component={LocalSync} onEnter={ this.requireAuth }/>
              <Route path="*" component={Login} onEnter={ this.verifyAuth }/>
          </Route>
      </Router>
    )
  }
}

- Claudio Rojas R

Answer 6

路由器实际上不应该改变，所以在这种情况下，你应该只需返回 false 给 shouldComponentUpdate() 函数。

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 {

  shouldComponentUpdate(){
     return false;
  }

  render() {
     return ( 
        <Router>
            <Route path="/" component={App}>
              <Route path="about" component={About} />
              <Route path="inbox" component={Inbox} />
            </Route>
        </Router>
      );
    }
}

- Jesse

Answer 7

Stormy的建议使用<Router routes={Routes}/>对我很有帮助。这是我的无警告代码片段，配合React热模块替换：

./index.js

import './globals';
import React from "react";
import ReactDOM from "react-dom";
import { AppContainer as HotContainer } from "react-hot-loader";
import { browserHistory } from 'react-router';
import Routes from "./components/Routes.jsx";

const render = function() {
    let Router = require('react-router').Router;
    ReactDOM.render(
        <HotContainer>
            <Router history={browserHistory} routes={Routes}/>
        </HotContainer>,
        document.getElementById('react-container'),
    );
};

render();

if( module.hot ) {
    module.hot.accept('./components/Routes', () => {
        render();
    });
}

./components/Routes.jsx

import React from "react";
import { Route, IndexRoute } from "react-router";
import App from "./App.jsx";
import Graphs from "./graphs/Graphs.jsx";
import Trends from "./trends/Trends.jsx";
import Patterns from "./patterns/Patterns.jsx";

const Routes = (
    <Route path="/" component={App}>
        <IndexRoute component={Graphs}/>
        <Route path="graphs" component={Graphs}/>
        <Route path="trends" component={Trends}/>
        <Route path="patterns" component={Patterns}/>
    </Route>
);
export default Routes;

- James McGuigan