Question

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

但路线如＆＃34; / something / something＆＃34;不工作：

（下一张图片正在评论此问题）

[我第一次加载此页面时] [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脚本等资源有关，而您的快速服务器无法处理该路由。这意味着它返回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＆＃39;意外令牌＆lt;＆＃39;错误？

2 个答案: