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

但這些並沒有推我沿。我運行一個Express服務器，我有一個路線有太多：

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