使用 React Router 和 Nginx 的意外令牌 <答案

【问题标题】：Unexpected token < with React Router & Nginx使用 React Router 和 Nginx 的意外令牌 <
【发布时间】：2016-07-27 04:33:08
【问题描述】：

路由器配置：

const routes =
[
    {
        path: '/',
        component: Layout,
        onEnter: sessionFilter,
        indexRoute:
        {
            component: ActivityIndex,
            onEnter: sessionFilter
        },
        childRoutes:
        [
            {
                path: 'login',
                component: LoginPage
            },{
                path: 'activity-new',
                component: ActivityNew,
                onEnter: sessionFilter
            },{
                path: 'activity-edit/:id',
                component: ActivityEdit,
                onEnter: sessionFilter
            }
        ]
    }
];

ReactDOM.render(<Router routes={routes} history={browserHistory}/>, Node);

Nginx 配置：

server {
    listen 5002;
    location / {
        root www/bc;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

所有使用 babel(webpack) 转译的文件。当我访问http://server:5002/something 时它工作正常，但如果我访问http://server:5002/something/1 或http://server:5002/something/ 则会抛出Unexpected token <。

当我查看开发人员工具中的 Sources 选项卡时，我注意到返回的 js 文件包含 index.html 作为其内容，这是由指向 http://server:5002/something/app.js 而不是 http://server:5002/app.js 的请求 URL 引起的。我需要在配置中添加一些东西来解决这个问题吗？

【问题讨论】：

标签： nginx react-router

【解决方案1】：

我认为脚本标记中 JS 文件的 src 路径存在问题。

代替<script src="app.js"></script>，使用：<script src="/app.js"></script>

【讨论】：