如何使用 React Router dom v4 配置 webpack 开发服务器?
How to configure webpack dev server with react router dom v4?
这是我的 webpack 配置代码:
const compiler = webpack({
entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')],
module: {
loaders: [
{
exclude: /node_modules/,
test: /\.js$/,
loader: 'babel',
},
],
},
output: {filename: 'app.js', path: '/'},
});
const app = new WebpackDevServer(compiler, {
contentBase: '/public/',
proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
publicPath: '/js/',
stats: {colors: true},
});
app.use('/', express.static(path.resolve(__dirname, 'public')));
工作正常,该应用程序在 localhost:3000/index.html 上运行,但是当我尝试实施 React Router dom v4 时。它不起作用。这是代码:
const About = () => <div> <h1>About</h1> </div>
ReactDOM.render(
<BrowserRouter>
<div>
<Route exact path='/' component={App}/>
<Route path='/about' component={About}/>
</div>
</BrowserRouter>,
mountNode
);
这是 localhost:3000/ 上的结果
在 localhost:3000/about 上。我收到一个错误:无法获取 /about 。不是我所期待的,为什么这不会呈现? 关于
我不认为它与 webpack-config 有任何关系。 Here 是一个使用 react-router-4.0 的基本 github 存储库。我创建了这个示例,没有对 webpack 配置中与 react-router-4.0 相关的任何特定更改。
在您的 webpack 配置中添加 'devServer'(如果尚未添加):
devServer: {
historyApiFallback: true,
}
代码中的两个小建议,尝试使用 'exact' 和 'about' 的路径,即
<Route exact path='/about' component={About}/>
并且,为 const 添加括号,即
const About = () => (<div> <h1>About</h1> </div>);
希望这能解决您的疑问。如果您需要任何其他信息,请告诉我。
在我的例子中,我必须删除代理配置,因为 webpack 服务器需要来自 http://localhost:3001 的响应。
// proxy: {
// '/': 'http://localhost:3001',
// },
这是我的 webpack 配置代码:
const compiler = webpack({
entry: ['whatwg-fetch', path.resolve(__dirname, 'js', 'app.js')],
module: {
loaders: [
{
exclude: /node_modules/,
test: /\.js$/,
loader: 'babel',
},
],
},
output: {filename: 'app.js', path: '/'},
});
const app = new WebpackDevServer(compiler, {
contentBase: '/public/',
proxy: {'/graphql': `http://localhost:${GRAPHQL_PORT}`},
publicPath: '/js/',
stats: {colors: true},
});
app.use('/', express.static(path.resolve(__dirname, 'public')));
工作正常,该应用程序在 localhost:3000/index.html 上运行,但是当我尝试实施 React Router dom v4 时。它不起作用。这是代码:
const About = () => <div> <h1>About</h1> </div>
ReactDOM.render(
<BrowserRouter>
<div>
<Route exact path='/' component={App}/>
<Route path='/about' component={About}/>
</div>
</BrowserRouter>,
mountNode
);
这是 localhost:3000/ 关于
我不认为它与 webpack-config 有任何关系。 Here 是一个使用 react-router-4.0 的基本 github 存储库。我创建了这个示例,没有对 webpack 配置中与 react-router-4.0 相关的任何特定更改。
在您的 webpack 配置中添加 'devServer'(如果尚未添加):
devServer: {
historyApiFallback: true,
}
代码中的两个小建议,尝试使用 'exact' 和 'about' 的路径,即
<Route exact path='/about' component={About}/>
并且,为 const 添加括号,即
const About = () => (<div> <h1>About</h1> </div>);
希望这能解决您的疑问。如果您需要任何其他信息,请告诉我。
在我的例子中,我必须删除代理配置,因为 webpack 服务器需要来自 http://localhost:3001 的响应。
// proxy: {
// '/': 'http://localhost:3001',
// },