React-Router：嵌套路由错误

Question

下面是我的路由代码

  <Router history={ browserHistory }>
    <Route path="/" component={ App } >
    <IndexRoute component={ Indexpage } />
      <Route path="users" component= { Users } >
        <Route path="signin" component={ Signin } />
        <Route path="signout" component={ Signout } />
        <Route path="signup" component={ Signup } />
      </Route>
    </Route>
</Router>

唯一有效的路径是组件{App}，{Indexpage}，{users}的路径

{users}组件嵌套在{App}本身中。所以当我进入URL：“ / users”时，它可以工作。

但是，当我转到嵌套在{users}中的其余URL时，例如{signin}，{signout}，{signup}。chrome状态错误：GET http://localhost:8080/users/bundle.js 404 (Not Found)

但是，当我尝试将用户中嵌套组件之一的Route更改为IndexRoute时，该特定路由将起作用。

我为{App}和{Users}组件放置了{this.props.children}。

有人可以建议如何使嵌套用户路由正常工作吗？我正在使用webpack捆绑我的jsx。

编辑1：我在下面包含了我的webpack.config

const webpack =  require('webpack');
const path = require('path');
const debug = process.env.NODE_ENV !== "production";

module.exports = {
  entry: ['./public/src/index.js'],
  output: {
    path: path.resolve(__dirname, 'public/src'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: 'public'
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: true , compress: { warnings: false }}),
  ]
};

Answer 1

您收到此错误（http：// localhost：8080 / users / bundle.js 404（未找到））不是因为React Router的嵌套路由方式存在问题，而是因为您的bundle.js文件只能在以下位置访问您的路线文件夹（或第一级路线）。因此，它无法加载您的JavaScript包。不用担心，Web Pack为此提供了非常有用的修复。公用路径：https : //webpack.js.org/guides/public-path/。

因此，在您的webpack.config中，替换为：

output: {
  path: path.resolve(__dirname, 'public/src'),
  filename: 'bundle.js'
},

带有：

output: {
  path: path.resolve(__dirname, 'public/src'),
  publicPath: '/',
  filename: 'bundle.js'
},

现在检查您的页面-您会注意到带有bundle.js文件的script标签看起来像这样：

<script type="text/javascript" src="/bundle.js?8816b34afd221213c243"></script>

注意bundle.js之前的斜杠。您的页面现在知道不仅在路由的第一级，而且在任何其他路由中都查找bundle js文件。因此，无论您是在http：// localhost：8080还是http：// localhost：8080 / users上进行热刷新，您的浏览器都将能够加载bundle.js。