2 llpoo llpoo 于 2016.04.06 17:13 提问

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 11:50
已采纳

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

devmiao
devmiao   Ds   Rxr 2016.04.06 17:20
llpoo
llpoo 谢谢小喵,不过您这个是14年的呢,现在版本不一样了
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!