llpoo 2016-04-06 09:13 采纳率: 100%
浏览 2131
已采纳

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 2016-04-12 03:50
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 k8s生产配置推荐配置及部署方案
  • ¥15 matlab提取运动物体的坐标
  • ¥15 人大金仓下载,有人知道怎么解决吗
  • ¥15 一个小问题,本人刚入门,哪位可以help
  • ¥15 python安卓开发
  • ¥15 使用R语言GD包一直不出结果
  • ¥15 计算机微处理器与接口技术相关问题,求解答图片的这个问题,有多少个端口,端口地址和解答问题的方法和思路,不要AI作答
  • ¥15 如何根据一个截图编写对应的HTML代码
  • ¥15 stm32标准库的PID角度环
  • ¥15 ADS已经下载好了,但是DAS下载不了,一直显示这两种情况,有什么办法吗,非常急!