反應路線，反應熱，loader.webpack（您不能更改<路由器的路由>，它會被忽略）

Question

它的使用react，react-router，react-hot-loader，webpack-dev-server和webpack我的第一個項目。當我更改反應組件中的代碼時，熱載入器生效，但同時控制檯告訴我一個警告：

您不能更改「路由器路由」;它會被忽略。

我不知道如何解決這個issue.there是代碼：

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

謝謝！ ！

Answer 1

嘗試使用這個配置 https://github.com/reactjs/react-router/issues/2704#issuecomment-170940448

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

Answer 2

你唯一需要做的事情，這是扔<Route />出渲染（）方法。
所以，有很多方法可以解決這個問題。
大多數官方的方式是@Stormy說的。
我這樣的解決方案：使用<Router routes={Routes}/>的

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

Answer 3

暴風雨的建議爲我工作。這裏是我的自由警告碼snippits發生反應熱模塊更換：

./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; 

Answer 4

路由器實際上應該永遠不會改變，所以在這種情況下，你應該能夠僅僅爲shouldComponentUpdate（）返回false。

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

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

Answer 6

我有同樣的問題，我的解決辦法是改變「進口{路由器，路由，鏈路}從'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'));

Answer 7

我知道這是一個老問題，但有人可能會發現這很有用。我嘗試了很多東西，最終對我的工作是：

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