Obtention de l'erreur d'analyse <this.props.activeRouteHandler/>

StackOverflow https://stackoverflow.com//questions/25028188

  •  21-12-2019
  •  | 
  •  

Question

Savoir comment obtenir réagir-routeur Vous travaillez avec ReactJS ?

Cela génère pour moi des erreurs dans la console du navigateur.Mon code est ci-dessous.j'ai installé npm react-router et en utilisant un serveur de base, c'est-à-dire python -m SimpleHTTPServer 3000 ce qui fonctionne bien pour l'application React qui n'a pas le code du routeur.

L'erreur dans la console est Uncaught Error: Parse Error: Line 18: Unexpected token . <this.props.activeRouteHandler/>

Je pense que mon app.js ne trouve pas le module React-Router, mais peut-être un problème RequireJS (je l'inclus à partir d'un CDN dans mon index) ???

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);
Était-ce utile?

La solution

J'ai eu le même problème lors de la mise à niveau vers React-Router 0.5 et j'utilisais même React 0.11.J'ai changé pour {this.props.activeRouteHandler()} et cela a commencé à fonctionner.J'ai cependant marqué cela comme une "à faire" à examiner.

Peu importe ce que vous faites, n'abandonnez pas.Ça marche très bien !Nous utilisions auparavant un routeur principal et ce routeur réactif est une telle bénédiction par rapport à notre ancienne configuration !

De plus, avec la configuration de votre répertoire, vous pouvez modifier vos besoins pour simplement "require('react')" et utiliser browserify pour créer votre application et les dépendances requises en un seul actif js.Tout le reste a l'air bien.

Autres conseils

La prise en charge des espaces de noms dans JSX a été introduite dans React 0.11.0.Vous avez 0.10.0.Modifiez les balises de script pour utiliser 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>

Avec la version 0.10.0 et inférieure, vous auriez fait ceci :

var activeRouteHandler = this.props.activeRouteHandler;
return <activeRouteHandler />
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top