react-router 只去索引路由

Question

我遇到了一种情况，即我的应用程序识别索引路由。我的 app.js 中的代码如下所示：

import React from 'react'

import { render } from 'react-dom'

import { Router, Route, Link, IndexRoute } from 'react-router'

class App extends React.Component {
    render() {
        return (
          <div>
            <div>
                Hello There App
            </div>
          </div>
        );
    }
}   

class About extends React.Component {
    render() {
        return (
          <div>
            <div>
                Hello There About
            </div>
          </div>
        );
    }
}

class Error extends React.Component {
    render() {
        return (
          <div>
            <div>
                Hello There Error
            </div>
          </div>
        );
    }
}

React.render((
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={About}/>
      <Route path="*" component={Error}/>
    </Route>
  </Router>
), document.body)

我查看了一些类似的链接： React Router only recognises index route

和

React router only works with root path

但这些并没有推动我前进。我正在运行一个快递服务器，我也有一条路线：

app.use(ecstatic({ root: __dirname + '/public', handleError:true }));
app.get('/', function(request, response){
    response.sendfile("./public/index.html");
});

无论有没有app.get("/"...，我都会遇到同样的问题。还值得注意的是，我也尝试过这种方式：https://github.com/rackt/react-router 但我的路线也不是这样。我将在这个问题上进行 4 天的无休止研究，希望你们中的某个人能指出我正确的方向。

package.json:

"dependencies": {
    "body-parser": "~1.14.1",
    "browserify": "^10.2.6",
    "cors": "^2.7.1",
    "ecstatic": "~0.8.0",
    "express": "~4.0.0",
    "history": "^1.13.1",
    "mongoose": "~4.2.6",
    "react": "~0.13.3",
    "react-dom": "^0.14.3",
    "react-router": "^1.0.0",
    "reactify": "^1.1.1",
    "socket.io": "^1.3.7",
    "uglify-js": "^2.4.24",
    "watchify": "^3.2.3"
  },
  "license": "public domain",
  "devDependencies": {
    "babelify": "^6.1.2"
  }

Answer 1

让你的路线看起来像：

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Index}/>
    <Route path="*" component={Error}/>
  </Route>
</Router>

您缺少的另一部分是应用程序组件中的{ this.props.children }，嵌套路由组件应该安装在该位置。

查看master-detail 示例，其中使用了 NotFound 路由。

在您的服务器上，我会将所有 * 重定向到 index.html，而不仅仅是 /：

app.get('*', function(request, response){
    response.sendfile("./public/index.html");
});