我的react.js/node.js应用程序存在问题。我在我的应用中使用了React-routers,并且有非常糟糕的错误。如何解决React Router'意外令牌<'错误?
Index route works, everything is fine.
Routes like "/something" also work
但像 “/某事/某事” 的路线不工作:
(下一页图像在评论这个问题)
[当我第一次加载此页时] [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'));
})
我会很高兴的任何建议。谢谢。
[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 –
请不要将代码/错误/其他文本作为图像发布。当图片链接停止时,上下文丢失。此外,无论如何,图像都不能从谷歌搜索文本,例如。 – mscdex