问题描述
这是我的第一个项目,使用 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:
我不知道如何解决这个问题。有代码:
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(你不能改变<路由器路由> ;;它将被忽略)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!