Question

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

我在本地使用webpack-dev-server并使用history-api-fallback标志：

没有history-api-fallback标志：我直接输入或刷新的任何路线都会给我＆＃34;不能GET /..."在浏览器窗口中呈现。这是预期的行为。
使用history-api-fallback标志：非嵌套路由可以直接输入或刷新，但嵌套路由不能。我没有在浏览器窗口中显示相同的react-router（？）错误，但我在控制台中获得404，看起来浏览器正试图从路径中的一个级别加载webpack包（例如，如果我在/学校/编辑并且我点击刷新，浏览器会尝试从/ schools /和404s加载webpack bundle.js。

我有一个非常简单的设置，只有几个嵌套路由。所有组件现在都只是用文本呈现div（除了App和Schools之外，它们都输出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 dev服务器的NPM脚本（从Vagrant vm内部运行）：

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

总结：

<Link>上述任何路径都可以正常工作，/学校，/学校/管理，/学校/编辑等。
在/学校打字或刷新工作正常。
键入任何其他嵌套路径（/ schools / manage，/ schools / edit）或刷新它们都不起作用。

我意识到正在打字这个＆＃39;学校＆＃39;从技术上讲，它也是一种嵌套的路线，但似乎工作得很好，所以很可能还有别的东西在继续。提前感谢任何见解。

Answer 1

在最长时间内将自己辞回hashHistory后，终于遇到了嵌套路由的解决方案。只需将捆绑脚本src从try更改为bundle.js即可。前导/bundle.js确保浏览器从根目录加载bundle.js。感谢Fastas：Unexpected token < error in react router component

嵌套路由和browserHistory

1 个答案: