ReactJs无法访问嵌套路由

Question

我在使用react-router的嵌套路由时遇到了问题。

下面是我的代码(两个简单的react组件，访问comp1/comp2的路由文件)：

House.js

export default connect(st => st)(class House extends React.Component {
 render() {
  return (
   <div>       
    {this.props.children}
   </div>
  );
 }
})

Window.js

export default connect(st => st)(class Window extends React.Component {
  render() {
    return (
      <div >
        hey hey
      </div>
    );
  }
})

routes.js

export const routes = (
  <Router history={ history }>
    <Route path="/house" component={House}>
      <Route path="/house/window" component={Window} />
   </Route>
 </Router>
);

当我以编程方式重定向到"/house/window“时，我可以访问路由，页面显示”嘿嘿“。如果我想直接访问url : localhost:8080/house/window

它显示一个空白页面和一个控制台错误：

请求URL:http://localhost:8080/house/window请求方法:获取状态码:304未修改

然后:获取http:// localhost:8080 /house/js/bundle.js (404)

此外，http:// localhost:8080 /house/ (带有尾随斜杠)也显示了相同的错误。

我真的不明白这个奇怪的重定向http:// localhost:8080 /house/js/bundle.js

我可能做错了什么，但在爬行了stackoverflow之后，我仍然看不到它。

Answer 1

我发现了这个问题: index.html中包含的bundle.js脚本包含了相对路径'js/bundle.js‘，因此我将其更改为'/js/bundle.js’。

遗憾的是，在我想嵌套一些路由之前，这并没有造成任何问题。

Answer 2

嵌套路由不能在path属性中包含父路径：

export const routes = (
  <Router history={ history }>
    <Route path="/house/" component={House}>
      <Route path="window" component={Window} />
   </Route>
 </Router>
);