Question

我在使用带路由器的嵌套路由时遇到了问题。

这是我的代码（两个简单的反应组件，路由文件来访问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 /房子/窗口

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

请求网址：http://localhost:8080/house/window 请求方法：GET 状态代码：304未修改

然后： GET 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>
);

ReactJs无法访问嵌套路由

2 个答案: