React-Router(controller)

01 Jul 2015

                    //导入router方法
                    var Route = Router.Route;
                    var RouteHandler = Router.RouteHandler;
                    var DefaultRoute = Router.DefaultRoute;
                    var NotFoundRoute = Router.NotFoundRoute;
                    var Redirect = Router.Redirect;
                    var Link = Router.Link;
                    var State = Router.State;

                    var About = React.createClass({
                      mixins: [ State ],
                      render: function () {
                        return (
                            <div>
                                <h2>About</h2>
                                //这种方式会编译为一个a出来
                                //Link是一个a的react组件
                                <Link to="/test/111">your sister...</Link>
                            </div>
                        );
                      }
                    });

                    var Inbox = React.createClass({
                      render: function () {
                        return <h2>Inbox</h2>;
                      }
                    });

                    var Home = React.createClass({
                      render: function () {
                        return <h2>Home</h2>;
                      }
                    });

                    var Message = React.createClass({
                      render: function() {
                        return <h3>Message</h3>;
                      }
                    });

                    var CourseRouteNotFound = React.createClass({
                      render: function() {
                        return <h3>CourseRouteNotFound</h3>;
                      }
                    });

                    // declare our routes and their hierarchy
                    var routes = (
                      <Route handler={App}>
                          //A DefaultRoute will be the matched child route when the parent's path matches exactly.
                          //Think of it like index.html in a directory of a static html server.
                          <DefaultRoute handler={Home}/>
                          //http://localhost/Beauty/web/reactRouter.html#/
                          <Redirect from="home" to="about"/>
                          //from--The path you want to redirect from
                          //to--The name of the route you want to redirect to
                          <Route name="about" path="about" handler={About}/>
                          //http://localhost/Beauty/web/reactRouter.html#/about
                          <Route path="inbox">
                              <Route path="messages/:id" handler={Message}/>
                              //http://localhost/Beauty/web/reactRouter.html#/inbox/messages/123
                              <NotFoundRoute handler={CourseRouteNotFound} />
                              //http://localhost/Beauty/web/reactRouter.html#/inbox/messages/123/222
                              //http://localhost/Beauty/web/reactRouter.html#/inbox/messages/
                              //http://localhost/Beauty/web/reactRouter.html#/inbox/
                          </Route>
                      </Route>
                    );

                    var App = React.createClass({
                      render () {
                        return (
                          <div>
                            <h1>App</h1>
                            <RouteHandler/>
                          </div>
                        )
                      }
                    });

                    Router.run(routes, Router.HashLocation, function(Root){
                        React.render(<Root/>, document.getElementById(data.id));
                    });