Skip to content
This repository has been archived by the owner on Jan 8, 2019. It is now read-only.

React-Router nested Components中的巨坑(Unexpected token <) #7

Open
BetaMee opened this issue Feb 25, 2017 · 0 comments
Open

Comments

@BetaMee
Copy link
Owner

BetaMee commented Feb 25, 2017

今天设计react-router中组件的时候踩了一个巨坑。
起因是这样的,我的AppRoutes.js是这样的:

      <Route path="/" component={Layout}>
          <IndexRoute component={IndexContainer} />
          <Route path="/posts" component={PostsLayout}>   
             <IndexRoute component={Posts}/>
             <Route path="/posts/:id" component={PostOne}/>            
          </Route>
      </Route>

照理来说,'/'对应着:Layout->IndexContainer,'/posts'对应着Layout->PostsLayout->Posts, '/posts/123'为Layout->PostsLayout->PostOne,但是输入'/'和'/posts'一切正常,'/posts/123'就会报Unexpected token <的错。我以为是服务端渲染问题或者版本问题,降级了react router到2.8(原来3.0),还是不行,去StackOver上查很多,终于找到了问题!!!!!!!!!!!!

原来是script脚本加载问题,我的view模板中是这样的:
<script src='devClient.bundle.js'></script>,看到没!!(好像没问题啊。。。x_x)

事实上,当我输入localhost:3000/posts/123的时候,脚本加载方式为localhost:3000/posts/devClient.bundle.js

咦,这里肯定不对啊,哪来的posts路径?!

所以正确的写法是加上绝对路径<script src='/devClient.bundle.js'></script>,万无一失,保平安啊。

以及贴上原帖供参考:
Unexpected token < error in react router component

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant