嵌套路由与browserHistory

Question

我在使用browserHistory和嵌套路由时遇到了一些问题。主要问题是直接输入路径或刷新浏览器:完全适用于非嵌套路由，但不适用于嵌套路由。

我在本地使用webpack-dev服务器，我使用的是历史api-后备标志：

• 如果没有历史-api-回退标志:我直接输入或刷新的任何路由都会给我“无法获得/.”在浏览器窗口中呈现。这是预期的行为。
• 使用历史-api-回退标志:非嵌套路由工作良好，直接键入或刷新，但嵌套路由不工作。我没有相同的反应-路由器(？)呈现在浏览器窗口中的错误，但我在控制台中得到404，看起来浏览器正在尝试从路径的一个级别加载webpack包(例如，如果我在/school/编辑，然后我点击刷新，浏览器尝试从/school/和404 s加载webpack bundle.js )。

我有一个非常简单的设置，只有几个嵌套的路由。所有组件现在都只是用文本呈现一个div (应用程序和学校除外，它们都输出this.props.children来呈现它们的子路由)。

我的路线：

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home} />

    <Route path="schools" component={Schools}>
      <IndexRoute component={SchoolManager} />
      <Route path="manage" component={SchoolManager} />
      <Route path="edit" component={SchoolEditor} />
    </Route>

    <Route path="*" component={Home} />
  </Route>
</Router>

Webpack配置：

entry: [
  'webpack/hot/only-dev-server',
  './app/scripts/main.js',
  './app/styles/main.scss'
],
devtool: 'source-map',
output: {
  path: './build/',
  filename: 'bundle.js'
},
module: {
  loaders: [
    {
      test: /\.(js|jsx)$/,
      loaders: ['react-hot', 'babel-loader?presets[]=es2015,presets[]=stage-0,presets[]=react'],
      exclude: /node_modules/
    },
    {
      test: /\.(html|png)$/,
      loader: 'file?name=[path][name].[ext]&context=./app'
    },
    {
      test: /\.scss$/,
      loaders: ["style", "css", "sass"]
    }
  ]
},
plugins: [
  new webpack.NoErrorsPlugin()
],
watchOptions: {
  poll: true
}

启动webpack开发服务器的NPM脚本(从Vagrant内部运行)：

webpack-dev-server --host 0.0.0.0 --progress --colors --inline --hot --history-api-fallback

概括地说：

• 对上述任何一条路径的<Link>工作良好，/schools、/学校/管理、/学校/编辑等。
• 在/schools上输入或刷新可以正常工作。
• 键入任何其他嵌套路径(/school/manage、/school/编辑)或刷新它们都不起作用。

我在打字的时候意识到，“学校”在技术上也是一种嵌套的途径，但似乎运作得很好，所以很可能还有别的事情发生。提前感谢您的任何见解。

Answer 1

在向hashHistory提交了最长的时间之后，终于找到了嵌套路由的解决方案。只需将包脚本src从bundle.js更改为/bundle.js即可。前面的/确保浏览器将从根目录加载bundle.js。给Fastas的信贷：Unexpected token < error in react router component