Помощ при програмиране, отговори на въпроси / Javascript Използване на реактивен рутер с CDN и без webpack или browserify - javascript,

Използване на React Router с CDN и без webpack или browserify - javascript, reactjs, requirejs, react-router, cdn

Продължи: Трябва да стартирам React Router без wepback или подобни инструменти. Директно от връзките на CDN, но аз оставам с някои грешки require.js.

Аз започвам да изграждам първото си приложение с React и аз се боря с React Router.

HTML:

<body>
<div id="container"></div>


<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>

<script src="https://npmcdn.com/react-router@2.4.0/umd/ReactRouter.js"></script>

<script type="text/babel" src="assets/scripts/03_templates/app.js" charset="utf-8"></script>

</body>

JS:

var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = ReactRouter;

//some classes

ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={Window}>
<IndexRoute component={InitialPage}/>
<Route path="register" component={Register} />
<Route path="search" component={Search} />
</Route>
</Router>
), document.getElementById("container"));

Всичко работи добре, но получавам това на конзолата:

react.js: 3639 Предупреждение: Ръчно извиквате React.PropTypes функция за валидиране на getComponent опора IndexRoute, Това е отхвърлена и няма да работи в производството със следващия версия. Може да виждате това предупреждение заради PropTypes от трета страна библиотека.

Така че, предполагам, че моят реактор Router е стара версия. Промених връзката към

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-0/react-router.js"></script>

Внимание: React.createElement: типът не трябва да бъде нула, неопределен, булев или номер. Той трябва да бъде низ (за DOM елементи) или a ReactClass (за съставни компоненти).

Търся за него и изглежда проблемът е на линия 1. Така че аз промених това:

var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = ReactRouter;

До това:

import { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } from "react-router";

И сега имам този проблем:

app.js: 2 Uncaught ReferenceError: require не е дефиниран

Търсих require.js, опитах някои неща, но нищо не определи проблема ми. Какво липсва? Трябва да изпълня това без webpack или similars инструменти.

Благодаря

Отговори:

3 за отговор № 1

Използвайте това в горната част на javascript:

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var Link = ReactRouter.Link;
var browserHistory = ReactRouter.browserHistory;

и премахнете import изявления.

В момента използвам този пакет с реактор-рутер: https://unpkg.com/react-router@3.0.0/umd/ReactRouter.js

РЕДАКТИРАНЕ:

Ето пример в CodePen: http://codepen.io/lsmoura/pen/pNPOzp - не използва декларации за внос.

4 за отговор № 2

за реакция маршрут v4.0, моля, прочетете пакет реактор-рутер добавете две js връзки на страницата си:

<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

в js кода можете да използвате:

const Router = window.ReactRouterDOM.BrowserRouter;
const Route =  window.ReactRouterDOM.Route;
const Link =  window.ReactRouterDOM.Link;
const Prompt =  window.ReactRouterDOM.Prompt;
const Switch = window.ReactRouterDOM.Switch;
const Redirect = window.ReactRouterDOM.Redirect;

също може да използва