Obteniendo error de análisis <this.props.activeRouteHandler/>

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

  •  21-12-2019
  •  | 
  •  

Pregunta

saber como llegar enrutador de reacción ¿Trabajando con ReactJS?

Me está arrojando errores en la consola del navegador.Mi código está debajo.lo instalé npm react-router y usando un servidor básico, es decir. python -m SimpleHTTPServer 3000 lo cual funciona bien para la aplicación React que no tiene el código del enrutador.

El error en la consola es Uncaught Error: Parse Error: Line 18: Unexpected token . <this.props.activeRouteHandler/>

Creo que mi app.js no puede encontrar el módulo de reacción del enrutador, pero ¿quizás sea un problema de RequireJS (lo incluyo desde un CDN en mi índice)?

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

índice.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>

aplicación.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);
¿Fue útil?

Solución

Tuve el mismo problema cuando actualicé a reaccionar-router 0.5 e incluso estaba usando reaccionar 0.11.Cambié a {this.props.activeRouteHandler()} y empezó a funcionar.Sin embargo, marqué esto como un "todo" para investigar.

No importa lo que hagas, no te rindas.¡Funciona muy bien!¡Estábamos usando un enrutador backbone antes y este enrutador de reacción es una gran bendición en comparación con nuestra configuración anterior!

Además, con la configuración de su directorio, puede cambiar sus requisitos para simplemente "requerir ('reaccionar')" y usar browserify para crear su aplicación y las dependencias requeridas en un único activo js.Todo lo demás parece bueno.

Otros consejos

La compatibilidad con espacios de nombres en JSX se introdujo en React 0.11.0.Tienes 0.10.0.Cambie las etiquetas del script para usar 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>

Con la versión 0.10.0 y anteriores habrías hecho esto:

var activeRouteHandler = this.props.activeRouteHandler;
return <activeRouteHandler />
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top