javascript - 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”时，我可以访问该路线并且页面显示“嘿嘿”。 如果我想直接访问网址: 本地主机:8080/house/window

它显示空白页面和控制台错误:

请求网址:http://localhost:8080/house/window 请求方式:GET 状态代码: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”。

遗憾的是，直到我想嵌套一些路由时，它才出现任何问题。