React Router 2.0 使用不成功，求大神解救

llpoo 2016-04-06 05:36:08

最近学使用React和React的路由，但是第一个DEMO一直写不出来，现在报错是



 <!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>react</title> 

    <script src="libs/react-0.14.8/build/react-with-addons.js" type="text/javascript"></script>

    <script src="libs/react-0.14.8/build/react-dom.min.js" type="text/javascript"></script>

    <script src="libs/ReactRouter.min.js" type="text/javascript"></script>

    <script src="libs/browser.min.js" type="text/javascript"></script>

  </head>

  <body>

    <div id="s1" align="center"></div>



    <script type="text/babel"> 

      var Router = ReactRouter;

      var Route = Router.Route;



      var Link=Router.Link;

      var browserHistory=Router.browserHistory;



      const App = React.createClass({

        render(){

          return (<div>app</div>);

        }

      });



      const About = React.createClass({render(){

          return (<div>About</div>);

        }});





      const Users = React.createClass({

        render() {

          return (

            <div>

              <h1>Users</h1>

              <div className="master">

                <ul> 

                  {this.state.users.map(user => (

                    <li key={user.id}><Link to={`/user/${user.id}`}>{user.name}</Link></li>

                  ))}

                </ul>

              </div>

              <div className="detail">

                {this.props.children}

              </div>

            </div>

          );

        }

      })



      const User = React.createClass({

        componentDidMount() {

          this.setState({

            // route components are rendered with useful information, like URL params

            user: findUserById(this.props.params.userId)

          })

        },



        render() {

          return (

            <div>

              <h2>{this.state.user.name}</h2> 

            </div>

          )

        }

      })



      const NoMatch=React.createClass({

        render(){

          return (<div>NoMatch</div>);

        }

      }); 

      ReactDOM.render((

        <Router history={browserHistory}>

          <Route path="/" component={App}>

            <Route path="about" component={About}/>

            <Route path="users" component={Users}>

              <Route path="/user/:userId" component={User}/>

            </Route>

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

          </Route>

        </Router>

      ), document.getElementById("s1"));





    </script>

  </body>

</html>