•  21-12-2019
  •  | 
  •  

質問

React-Router ReactJSの操作を知っていますか？

ブラウザコンソールにエラーを投げます。私のコードは以下の通りです。私はnpm react-routerをインストールし、基本サーバーを使用して、Reactアプリケーションに問題がないpython -m SimpleHTTPServer 3000。

コンソールのエラーはUncaught Error: Parse Error: Line 18: Unexpected token . <this.props.activeRouteHandler/>

です。

私は私のApp.jsがReact-Routerモジュールを見つけることができないと思いますが、必要なjsの問題があるかもしれません（私は自分のインデックスのCDNから含めます）??? 

Directories
/index.html
/scripts/app.js
/node_modules/react-router
.

index.html 

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="http://fb.me/react-0.10.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>

  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx" src="scripts/app.js"></script>

  </body>
</html>
.

app.js 

/** @jsx React.DOM */

var Routes = require('../node_modules/react-router/modules/main').Routes;
var Route = require('../node_modules/react-router/modules/main').Route;
var Link = require('../node_modules/react-router/modules/main').Link;

var About = React.createClass({
  render: function() {
    return <h2>About</h2>;
  }
});

var Users = React.createClass({
  render: function() {
    return (
      <div>
        <h2>Users</h2>
        <this.props.activeRouteHandler/>
      </div>
    );
  }
});

var User = React.createClass({
  render: function() {
    return <div>{this.props.params.userId}</div>
  }
});

var App = React.createClass({
  render: function() {
    return (
      <div>
        <ul>
          <li><Link to="about">About</Link></li>
          <li><Link to="users">Users</Link></li>
          <li><Link to="user" userId="123">User 123</Link></li>
        </ul>
        <this.props.activeRouteHandler/>
      </div>
    );
  }
});

React.renderComponent((
  <Routes>
    <Route handler={App}>
      <Route name="about" handler={About}/>
      <Route name="users" handler={Users}>
        <Route name="user" path="/user/:userId" handler={User}/>
      </Route>
    </Route>
  </Routes>
), document.body);
.

役に立ちましたか？

解決

反応ルータ0.5にアップグレードしたときに同じ問題があり、反応0.11を使用しても同じ問題がありました。{this.props.ActiverOuteHandler（）}に変更され、作業を開始しました。私はこれを「Todo」としてマークしてください。

あなたが何をしてもあきらめないでください。それは素晴らしい働きます！私たちは前にバックボーンルーターを使用していました、そしてこのReactルーターは私たちの古いセットアップと比較してそのような祝福です！

あなたのディレクトリセットアップでも、「必要なもの（ 'React'）」を変更して、Browserifyを使用してアプリと必要な依存関係を単一のJSアセットに使用することができます。他のすべてがよさそうです。

他のヒント

JSXのNAX空間のサポートを反応0.11.0に導入した。あなたは0.10.0を持っています。0.11.0を使用するようにスクリプトタグを変更します。

<script src="http://fb.me/react-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
.

0.10.0以下では、これを行ったことがあります。

var activeRouteHandler = this.props.activeRouteHandler;
return <activeRouteHandler />
.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top