llpoo
llpoo
采纳率100%
2016-04-06 09:13 阅读 2.1k
已采纳

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

最近学使用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>

图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    llpoo llpoo 2016-04-12 03:50

    我自己已经解决了这个问题,原因是jsx解析react-router需要webpack环境支持,使用nodejs来搭建webpack环境就可以了

    点赞 评论 复制链接分享
  • devmiao devmiao 2016-04-06 09:20
    点赞 评论 复制链接分享

相关推荐