反应路线,反应热,loader.webpack(您不能更改<路由器的路由>,它会被忽略)
它的使用react
,react-router
,react-hot-loader
,webpack-dev-server
和webpack
我的第一个项目。当我更改反应组件中的代码时,热载入器生效,但同时控制台告诉我一个警告:反应路线,反应热,loader.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'));
谢谢! !
尝试使用这个配置 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>
)
你唯一需要做的事情,这是扔<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>
);
}
}
我更喜欢这个解决方案。为什么这会发生呢?即使有警告,我的代码也能正常工作,但在控制台中出现任何类型的错误都很烦人。 – Kunok
暴风雨的建议为我工作。这里是我的*警告码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;
路由器实际上应该永远不会改变,所以在这种情况下,你应该能够仅仅为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>
);
}
}
我的解决办法是改变 “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>
)
}
}
我有同样的问题,我的解决办法是改变“进口{路由器,路由,链路}从'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'));
我知道这是一个老问题,但有人可能会发现这很有用。我尝试了很多东西,最终对我的工作是:
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>
);
}
}
看看https://github.com/rackt/react-router/issues/2704 ...有不少人提出这和有几件事你可以尝试基于那里的建议 –
尝试在常量中定义路线,看看它是否工作。我在我的项目中使用了类似的设置,但我没有看到此错误消息。 –
@ AbhishekJain.thank你的回答,我一直在看github.com/rackt/react-router/issues/2704,但是我找不到解决办法。我不知道这个警告是否会对你有效我的项目,即使react-router和hot-loader是有用的。 –