2017-03-10 37 views
-1

我的react.js/node.js應用程序存在問題。我在我的應用中使用了React-routers,並且有非常糟糕的錯誤。如何解決React Router'意外令牌<'錯誤?

Index route works, everything is fine. enter image description here

Routes like "/something" also work enter image description here

但像 「/某事/某事」 的路線不工作:

(下一頁圖像在評論這個問題)

[當我第一次加載此頁時] [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')); 
}) 

我會很高興的任何建議。謝謝。

+0

[3]:https://i.stack.imgur.com/2Qz7R.png [4]:https://i.stack.imgur.com/PLgsD.png [5]:https:/ /i.stack.imgur.com/g8cxZ.png [6]:https://i.stack.imgur.com/Z765B.png [7]:https://i.stack.imgur.com/wIRlv .png –

+1

請不要將代碼/錯誤/其他文本作爲圖像發佈。當圖片鏈接停止時,上下文丟失。此外,無論如何,圖像都不能從谷歌搜索文本,例如。 – mscdex

回答

0

問題已解決。 我所有的鏈接都是相對的./plugins/css/normalize.css,當我試圖加載localhost/write/123時,他們(鏈接)試圖加載localhost/write/plugins/css/normalize.css

我已經刪除了點/plugins/css/normalize.css,問題解決了! 感謝您的建議。

1

您看到的問題與嘗試加載資源(如js腳本或css腳本)有關,並且您的快速服務器無法處理該路線。這意味着它返回的HTML文件。和JavaScript去呃我dono什麼<是..如果你注意到<是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> 

基本上任何導入,你有一個本地路徑。你需要確保你的服務器上有一個接受它的路由。

+0

http://i.stack.imgur.com/wIRlv.png 我的服務器。js圖像。你能告訴我嗎? –

+0

你爲什麼給我圖像?你在我的回答中沒有聽到我說的任何話嗎?你必須接受你在服務器上請求的路線 –

+0

看來我不理解你,對不起。你說過「要給出一個完整的答案,我需要看看你的服務器文件」。好的,我需要解析'。/ plugins/css/normalize.css'等路由。 –