Chegando Erro De Análise <this.props.activeRouteHandler />

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

  •  21-12-2019
  •  | 
  •  

Pergunta

Saiba como chegar reagir-roteador trabalhando com ReactJS?

Ele está jogando erros no navegador do console para mim.Meu código está abaixo.Eu instalei npm react-router e usar um servidor de i.é. python -m SimpleHTTPServer 3000 o que funciona bem para Reagir aplicativo que não tenho o Router código.

Erro no console é Uncaught Error: Parse Error: Line 18: Unexpected token . <this.props.activeRouteHandler/>

Eu acho que o meu app.js não consegue encontrar o reagir-módulo router, mas talvez um RequireJS problema (eu incluo-lo a partir de uma CDN no meu índice) ???

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);
Foi útil?

Solução

Eu tive o mesmo problema quando eu atualizei para reagir-roteador 0,5 e eu estava usando reagir 0,11.Eu mudei para {this.props.activerouthandler ()} e começou a funcionar.Eu marcei isso como um "Todo" para olhar embora.

Não importa o que você faça, não desista.Funciona ótimo!Nós usando o roteador de backbone antes e este roteador reagir é uma bênção em comparação com a nossa antiga configuração!

Também com sua configuração de diretório, você pode alterar o seu requerido para apenas "exigir ('reagir')" e use Browserify para criar seu aplicativo e dependências necessárias em um único ativo JS.Tudo o mais parece ser bom.

Outras dicas

Suporte de espaço de nomes na JSX foi introduzido em Reagir 0.11.0.Você tem 0.10.0.Alterar as tags de 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>

Com o 0.10.0 e, abaixo, você teria feito isso:

var activeRouteHandler = this.props.activeRouteHandler;
return <activeRouteHandler />
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top