Javascript React路由器仅识别索引路由

我有两条路线，

/

和

/about

，我还测试了更多的路线。所有管线仅渲染主组件，即

/

当我尝试一条不存在的路线时，它会识别出这一点并显示警告

警告：没有与路径匹配的路由“/示例”。确保您的路线中有某个地方

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

从“React”导入React；
从“反应路由器”导入路由器；
从“react router”导入{DefaultRoute，Link，Route，RouteHandler}；
从“./components/Main”导入{Home，About}；
让路线=(
);
Router.run（路由、函数（处理程序）{
React.render（，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
};

从“React”导入React；
var Home=React.createClass({
render（）{
返回这是主要组件
}
});
var About=React.createClass({
render（）{
返回这是关于
}
});
导出默认值{
家，大约
};

我尝试过为“大约”添加显式路径，但没有效果。

我偶然发现了这一点，但在它的回答中没有找到救赎

---

有人能解释一下问题出在哪里吗？

因为您已经将

关于
嵌套在
主页下
您需要在
主页
组件中呈现
组件，以便React Router能够显示您的路由组件

import {RouteHandler} from 'react-router';

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

从'react router'导入{RouteHandler}；
var Home=React.createClass({
render（）{
返回（这是主要组件
);
}
});
使用ES6和最新的react路由器将如下所示：

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

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

从“React”导入React；
进口{
路由器，
路线,，
IndexRoute，
}
来自“反应路由器”；
常数路由=(
);
const Home=React.createClass({
render（）{
返回(
这是主要组成部分
{this.props.children}
);
}
});
//记住导入或删除关于组件
//定义在某处
反应。呈现（路线、文件、正文）；

在旁注中，如果要将未找到的管线与特定视图相匹配，请使用以下命令：

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



请注意，路径设置为*

还要编写自己的NotFound组件

我的看起来像这样：

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

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

const NotFound=React.createClass({
render（）{
让_location=window.location.href；
返回(
404无效URL


您已到达：


{u位置}

);
}
});