React Router仅识别索引路由

Question

我有2条路线，/并且/about我已经测试了更多条路线。所有路线仅呈现home组件/。

当我尝试一条不存在的路线时，它会识别出正确的路线并显示警告 Warning: No route matches path "/example". Makesure 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
};

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

我偶然发现了这个但是在其答案中没有找到任何解决方法。

任何人都可以阐明可能是什么问题吗？

Answer 1

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

import {RouteHandler} from 'react-router';

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