【发布时间】：2017-08-01 05:26:27
【问题描述】：
我的 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'));
})
我很乐意接受任何建议。谢谢。
【问题讨论】：
-
请不要将代码/错误/其他文本作为图片发布。当图像链接断开时，上下文就会丢失。此外，无论如何，例如无法从谷歌搜索图像。
标签： node.js reactjs react-router react-jsx