React Router 只识别索引路由答案

【问题标题】：React Router only recognises index routeReact Router 只识别索引路由
【发布时间】：2015-09-06 08:34:53
【问题描述】：

我有 2 条路线，/ 和 /about，我已经测试了更多路线。所有路由只渲染主组件/。

当我尝试一条不存在的路线时，它会识别出没问题并显示警告 Warning: No route matches path "/example". Make sure you have <Route path="/example"> somewhere in your routes

App.js

import React from 'react';
import Router from 'react-router';
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';
import {Home, About} from './components/Main';

let routes = (
    <Route name="home" path="/" handler={Home} >
        <Route name="about" handler={About} />
    </Route>
);

Router.run(routes, function (Handler) {  
  React.render(<Handler/>, document.body);
});

./components/Main

import React from 'react';

var Home = React.createClass({
    render() {
        return <div> this is the main component </div>
    }
});

var About = React.createClass({
    render(){
        return <div>This is the about</div>
    }
});

export default {
    Home,About
};

我尝试添加一个显式路径到 about 无济于事。 <Route name="about" path="/about" handler={About} />

我偶然发现了这个stackoverflow Q，但在它的回答中没有找到救赎。

谁能解释一下可能是什么问题？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

使用 ES6 和最新的 react-router 应该是这样的：

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

const routes = (
  <Router>
    <Route component={Home} path="/">
      <IndexRoute component={About}/>
    </Route>
  </Router>
);

const Home = React.createClass({
  render() {
    return (
      <div> this is the main component
        {this.props.children}
      </div>
    );
  }
});

//Remember to have your about component either imported or
//defined somewhere

React.render(routes, document.body);

附带说明，如果您想将未找到的路由匹配到特定视图，请使用：

<Route component={NotFound} path="*"></Route>

注意路径设置为 *

同时编写你自己的 NotFound 组件。

我的看起来像这样：

const NotFound = React.createClass({
  render(){
   let _location = window.location.href;
    return(
      <div className="notfound-card">
        <div className="content">
          <a className="header">404 Invalid URL</a >
        </div>
        <hr></hr>
        <div className="description">
          <p>
              You have reached:
          </p>
          <p className="location">
            {_location}
          </p>
        </div>
      </div>
    );
  }
});

【讨论】：

【解决方案2】：

由于您已将 About 嵌套在 Home 下，因此您需要在您的 Home 组件中渲染一个 <RouteHandler /> 组件，以便 React Router 能够显示您的路由组件。

import {RouteHandler} from 'react-router';

var Home = React.createClass({
    render() {
        return (<div> this is the main component
            <RouteHandler />
        </div>);
    }
});

【讨论】：