react-router只进入索引路由

Question

I'm running into a situation in react where my application on recognizes the index route. my code in my app.js looks like this:

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)

There were some similar links I checked out: React Router only recognises index route

and

React router only works with root path

But these didn't push me along. I'm running an express server and I have a route there too:

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

With or without the app.get("/"... I run into the same issue. It's also worth noting that I tried it this way as well: https://github.com/rackt/react-router but my routes didn't work that way either. I'm going on 4 days with this issue with endless research, hopefully one of you can point me in the right direction.

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

Make your routes look like:

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

the other part you are missing is { this.props.children } in your app component, where the nested route components should be mounted.

Check out the master-detail example, where the NotFound route is used.

And on your server I would redirect everything * to index.html not only / :

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