如何修复 React Router 'unexpected token <' 错误？

Question

我的 react.js / node.js 应用程序有问题。我在我的应用程序中使用 React-routers，并且有一个非常严重的错误。

Index route works, everything is fine.

Routes like "/something" also work

但是像“/something/something”这样的路由不起作用：

（下图在本题评论中）

[当我第一次加载此页面时][3]

[当我重新加载页面时][4]

我的代码： index.html

<!DOCTYPE html>
 <html>

  <head>
   <meta charset="utf-8">
   <title>Boox</title>
   <meta name="theme-color" content="teal">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons" />
   <link type="text/css" rel="stylesheet" href="./plugins/css/normalize.css" />
   <link type="text/css" rel="stylesheet" href="./plugins/css/animate.css" />
   <link type="text/css" rel="stylesheet" media="screen, projection" href="./plugins/materialize/css/materialize.min.css" />
</head>

<body>
  <div id="root">

  </div>
  <script src="./plugins/js/jquery.js"></script>
  <script src='./plugins/materialize/js/materialize.min.js'></script>
  <script src="./dist/bundle.js"></script>
</body>

index.js:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, Link, browserHistory, IndexRoute} from 'react-router'

import App from './App.js';
import Main from './components/Main.js';
import NotFound from './components/NotFound.js';

import Users from './components/user/Users.js';
import Profile from './components/user/Profile.js';
// components
import Signup from './components/user/auth/Signup.js';
import Signin from './components/user/auth/Signin.js';

import Editor from './components/user/write/Editor.js';
import Write from './components/user/write/Write.js';

// styles
require('./less/common.less');



ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Main} />
      <Route path="signup" component={Signup} />
      <Route path="signin" component={Signin} />
      <Route path="write" component={Write}>
        <Route path=":id" component={Editor} /> // This doesnot work :(
      </Route>
      <Route path="users" component={Users}>
        <Route path=":id" component={Profile} /> // This doesnt work :(
      </Route>
    </Route>
    <Route path=":id" component={NotFound} />
  </Router>
), document.getElementById('root'))

Users.js:

import React, {Component} from 'react';
import {Router, Route, Link, browserHistory, IndexRoute} from 'react-router'

export default class Users extends Component {

  constructor() {
    super()
    this.state = {

    }
  }
  render() {
    return (
      <div>
        <h1>TEST USERS ROUTE</h1>
        {this.props.children}
      </div>
    )
  }
}

Server.js 还包含这个：

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'index.html'));
})

我很乐意接受任何建议。谢谢。

Answer 1

您看到的问题与尝试加载 js 脚本或 css 脚本等资源有关，而您的快速服务器不处理该路由。这意味着它 returns html 文件。 javascript 是啊，我不知道 < 是什么……如果你注意到 < 是 html 文件中的第一个字符。

为了给出完整的答案，我需要查看您的服务器文件是什么，以查看缺少的路由。但我猜这些都是罪魁祸首

<link type="text/css" rel="stylesheet" href="./plugins/css/normalize.css" />
<link type="text/css" rel="stylesheet" href="./plugins/css/animate.css" />
<link type="text/css" rel="stylesheet" media="screen, projection" href="./plugins/materialize/css/materialize.min.css" />
<script src="./plugins/js/jquery.js"></script>
<script src='./plugins/materialize/js/materialize.min.js'></script>
<script src="./dist/bundle.js"></script>

基本上，您拥有的任何导入都具有本地路径。您需要确保服务器上有一条接受它的路由。

Answer 2

问题已解决。我所有的链接都是相对的 ./plugins/css/normalize.css，当我尝试加载 localhost/write/123 时，它们（链接）正在尝试加载 localhost/write/plugins/css/normalize.css。

我删除了圆点 /plugins/css/normalize.css，问题解决了！谢谢指教。

如何修复 React Router 'unexpected token <' 错误？

How do I fix the React Router 'unexpected token <' error?

node.js

reactjs

react-jsx

react-router