Analysefehler erhalten <this.props.activeRouteHandler />
-
21-12-2019 - |
Frage
Wissen, wie man kommt react-Router mit ReactJS arbeiten?
Es wirft für mich Fehler in der Browserkonsole auf.Mein Code ist unten.Ich habe installiert npm react-router
und mit einem Basisserver, d. h. python -m SimpleHTTPServer 3000
das funktioniert gut für Reaktions-Apps, die nicht über den Router-Code verfügen.
Fehler in der Konsole ist Uncaught Error: Parse Error: Line 18: Unexpected token .
<this.props.activeRouteHandler/>
Ich denke, es ist meine App.js kann das React-Router-Modul nicht finden, aber möglicherweise ein erforderliches Problem (ich füge es von einem CDN in meinen Index ein)???
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);
Lösung
Ich hatte das gleiche Problem, als ich auf React-Router 0.5 aufgerüstet habe und ich habe sogar React 0.11 verwendet.Ich habe zu {this .Requisite.activeRouteHandler ()} und es fing an zu funktionieren.Ich habe dies jedoch als "Todo" markiert, um es mir anzusehen.
Egal was du tust, gib nicht auf.Es funktioniert super!Wir haben zuvor einen Backbone-Router verwendet und dieser Reaktionsrouter ist im Vergleich zu unserem alten Setup ein Segen!
Auch mit Ihrem Verzeichnis-Setup können Sie Ihre Anforderungen in "require ('react')" ändern und browserify verwenden, um Ihre App und die erforderlichen Abhängigkeiten in einem einzigen js-Asset zu erstellen.Alles andere sieht gut aus.
Andere Tipps
Namespace-Unterstützung in JSX wurde in React 0.11.0 eingeführt.Sie haben 0.10.0.Ändern Sie die Skript-Tags in 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>
Mit der 0.10.0 und darunter hättest du das gemacht:
var activeRouteHandler = this.props.activeRouteHandler;
return <activeRouteHandler />