reactjs - React 路由器嵌套不起作用

Question

我正在尝试在我的提供程序中创建路由，但它不适用于嵌套级别。

直到一级它都工作正常。

找到下面的代码片段

    render(
  <Provider store={store}>
  <Router history={browserHistory}>
    <Route path="/" component={PageTemplate}>
      <Route path="/login" component={Login}/>
      <Route path="/secure" component={BodyTemplate}>
        <Route path="page1" component={Page1}/>
        <Route path="page2" component={Page2}/>
        <Route path="page3" component={Page3}/>
      </Route>
      <Route path="*" component={InvalidPage}/>
    </Route>
  </Router>
</Provider>, document.getElementById('app'))

如果我打开 URL localhost:3000/login 它工作正常

但是如果我给出 URL localhost:3000/secure/page1我在浏览器控制台中看到如下错误

bundle.min.js:1 未捕获的语法错误:意外的标记<

如果我的路由器配置有任何问题，请帮助我。

Answer 1

更改脚本加载位置

<script src="bundle.min.js"></script>

到

<script src="/bundle.min.js"></script>

工作时，当我们进入第二级时，它试图从当前的网址加载，即localhost:3000/login/bundle.min.js，这是错误的，将其更改为根网址它工作 localhost:3000/bundle.min.js