React Router Nested URLs Do not work!

嵌套路由不起作用，访问#/index 页面输出内容index 访问#/index/basic页面还是输出内容index，而不是basic，代码如下：

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>  
<script src="script/lib/react.js"></script>
<script src="script/lib/ReactRouter.js"></script>
<script src="script/lib/JSXTransformer.js"></script>
<script src="script/my/index.js" type="text/jsx"></script>
</body>
</html>

index.js

var Route = ReactRouter.Route;
var RouteHandler = ReactRouter.RouteHandler;    
var Index = React.createClass({
    render: function () {
        return (
            <h1>Index</h1>
        )
    }
}); 
var Basic = React.createClass({
    render: function () {
        return (
            <h1>Basic</h1>
        )
    }
}); 
var App = React.createClass({
    render: function () {
        return (
            <RouteHandler />
        )
    }
}); 
var routes = (
    <Route paht="/" handler={App}>
        <Route path="index" handler={Index}>
            <Route path="basic" handler={Basic}/>
        </Route>
    </Route>
);  
ReactRouter.run(routes, ReactRouter.HashLocation, function (Root) {
    React.render(<Root/>, document.body);
});

页面效果： http://localhost:8080/#/index Index http://localhost:8080/#/index/basic Index