反应路由器+ webpack，子路由不起作用

Posted 2023-02-21

【中文标题】反应路由器+ webpack，子路由不起作用

【英文标题】：React router + webpack, sub routes not working

【发布时间】：2017-02-24 08:26:33

【问题描述】：

我正在尝试为我的应用程序设置我的路由器，并让基本/入口点正常工作（似乎）。似乎当我尝试开始添加子路由时，它正在中断。我现在有一个非常简单的设置。我正在使用 react + redux，我的渲染看起来像：

 ReactDOM.render(
<Provider store=store>
     <Router history=browserHistory >
        <Route path="/" component=comp1.Component>
            <Route path="test" component=comp2.Component />
        </Route>
    </Router>
</Provider>,
// eslint-disable-next-line no-undef
document.getElementById('app')
);

我在 localhost:8080 上运行 webpack 开发服务器，它服务于第一条路由没有问题，但是当我转到 localhost:8080/test 时，我得到一个 Cannot GET /test 。

这是我的 webpack 配置：

var path = require('path');
var webpack = require('webpack');

module.exports = 
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './client/app.jsx'
  ],
  output: 
    path: path.join(__dirname, ''),
    filename: 'bundle.js',
    publicPath: '/'
  ,
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.DefinePlugin(
      'process.env.NODE_ENV': JSON.stringify('production')
    ),
    new webpack.optimize.UglifyJsPlugin(
      compress: 
        warnings: false
      
    )
  ],
   module: 
    loaders: [
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      include: __dirname,
      query: 
        presets: [ 'es2015', 'react', 'react-hmre' ]
      
    ]
  

不确定我在这里做错了什么，如果有任何帮助，我将不胜感激。谢谢！

【参考方案1】：

React Router 使用 html5 历史 API。这意味着 404 响应需要服务于/index.html。

文档mention how this works。您需要将此添加到您的 module.exports 对象中：

devServer: 
  historyApiFallback: true

请注意，这仅适用于 CLI，当使用 Node.js API 时，您需要将其添加为第二个参数：

var server = new WebpackDevServer(compiler,  historyApiFallback: true );

【讨论】：

当我添加它并转到 /test 时，它不再给我一个 404，但它仍然只显示component=comp1.Component（不是我指定用于测试的那个。谢谢！

根据我的经验，您仍然需要使用斜杠，因此路径应该是/test。如果已修复此答案，您能否将其标记为已接受？

更改路径也不起作用。仍然显示错误的组件。

在comp1.Component 文件中，你是在渲染孩子吗？ comp2.Component 将呈现为一个孩子。在comp1.Component 中，您需要在render() 方法中添加this.props.children。