react-route,react-hot-loader.webpack (你不能改变<Router routes>；它会被忽略)

Posted 2023-02-21

【中文标题】react-route,react-hot-loader.webpack (你不能改变<Router routes>；它会被忽略)

【英文标题】：react-route,react-hot-loader.webpack (You cannot change <Router routes>; it will be ignored)

【发布时间】：2016-04-18 01:56:55

【问题描述】：

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

你不能改变《Router routes》；它将被忽略。

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

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

谢谢你！！！！

【问题讨论】：

看看github.com/rackt/react-router/issues/2704...很多人提出了这个问题，您可以根据那里的建议尝试一些事情

尝试在常量中定义路由，看看它是否有效。我在我的项目中使用了类似的设置，但我没有看到此错误消息。

@AbhishekJain.thank for your answer，我一直在关注 github.com/rackt/react-router/issues/2704。但我无法从中找到解决方案。我不知道如果警告会对我的项目产生影响，即使 react-router 和 hot-loader 很有用。

@AbhishekJain。哦，我的上帝。我昨天已经在常量中定义了路线，也许我写错了，它没有用。但是刚才，我再次使用这种方式，它很有效。非常感谢 ！啊……

酷...乐于助人！！

【参考方案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>
)

【参考方案2】：

您唯一需要做的就是将<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>
      );
    

【讨论】：

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

【参考方案3】：

Stormy 使用<Router routes=Routes/> 的建议对我有用。这是我的带有反应热模块更换的无警告代码片段：

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

【参考方案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>
      );
    

【参考方案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>
    )
  

【参考方案6】：

我也有同样的问题，我的解决方法是将“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'));

【参考方案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>
       );