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年的呢,现在版本不一样了
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
react-router2.0 web 使用
一、前端script 引用react-router 的使用。 前言: router有两个版本,最新的是2.0,和旧的版本。 所以有有两种写法。 汗了吧 先说2.0下的用法 首先说环境: 需要引用react react-dom reactrouter 2.0 babel/browser.js  react 以前需要引用jsx来解析。 现在用babel来解析,所以script typ
初入react-router新手入门
React-router新手入门 关于react-router的解释。 声明:本人也是一个新手,此篇文章只是作为一个参考,纯粹给大家作为一种借鉴参考,若有错误,可评论指出,谢谢。 此文参考前端先生的文章!   首先:     在使用react-router的时候截止目前应该使用router3.0以上的版本,推荐目前使用3.0因为3.0和之前的2.0改动较小,而4.0据说改动很大。如
React Router 2.0和4.0版本的不同
react2.0版本下载使用的是npm install react-router -S; 而react4.0 版本使用的是npm install react-route-dom 。 2.废除hashistory 、indexroute 、router用BrowserRouter 代替。 3.exact:匹配路径。 4.switch:选择性加载当前唯一路径。 5.BrowserRouter
【react dva】填坑实录,router 4.0+, less 【一直更新】
 · 坑1:路由升级react-dom到16.0.0后,相应的router 也被升级到了4.0以上。以往的路由设置失效。以往:&amp;lt;Route path='/HomeIndex' component={Home}&amp;gt; &amp;lt;IndexRoute component={HomeIndex}/&amp;gt; &amp;lt;Route path='/Home/About' com...
react-router v4
安装模块   react-router-dom   导出组件   { HashRouter, Route,Link,Switch } from 'react-router-dom'          用列:       (                             transitionName="example"            
总结react-router-redux中遇到的坑和一些小的知识点
在使用react 中经常会遇到各种个样的问题,如果对react不熟悉则会对遇到的问题感到莫名其妙而束手无策,接下来分析一下react中容易遇到的问题和注意点。1、setState()是异步的this.setState()会调用render方法,但并不会立即改变state的值,state是在render方法中赋值的。所以执行this.setState()后立即获取state的值是不变的。同样的直接赋...
React fundamental 和 React Router
React fundamental 和 React Router
React全家桶之react-router(二)
如果你用过angularJs,你一定知道有路由这个东西,浏览器根据路由上“#”号后面的标记区分不同的逻辑页面,并将不同的页面绑定到对应的控制器上。         angularJs和react都是适合单页应用的前端框架,路由系统大同小异,在 web 应用开发中,路由系统是不可或缺的一部分。在浏览器当前的 URL 发生变化时,路由系统会做出一些响应,用来保证用户界面与 URL 的同步。随着单
React Router 详解
React Router 是完整的 React 路由解决方案,它保持 UI 与 URL 同步,拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理 GitHub 访问地址 : https://github.com/ReactTraining/react-router 安装 $ npm install --save react-router
React Router基础教程
http://www.cnblogs.com/imwtr/p/6293469.html?utm_source=tuicool&utm_medium=referral React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步   下面就来简