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");
});

react-router只进入索引路由

1 个答案: