Использование React Router с CDN и без webpack или браузера

Резюме: Мне нужно запустить React Router без использования Wepback или аналогичных инструментов. Прямо из ссылок CDN, но я застрял с некоторой ошибкой require.js.Использование React Router с CDN и без webpack или браузера

Я начинаю строить свое первое приложение с реакцией, и я борюсь с React Router.

HTML:

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


    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/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/[email protected]/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 Warning: You are manually calling a React.PropTypes validation function for the getComponent prop on IndexRoute . This is deprecated and will not work in production with the next major version. You may be seeing this warning due to a third-party PropTypes library.

Итак, я полагаю мой реагировать маршрутизатор является старый версия. Я изменил ссылку на

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

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

Я ищу об этом, и это, кажется, проблема на линии 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 is not defined

Я искал require.js, попробовал кое-что, но ничего не исправил мою проблему. Что мне не хватает? Мне нужно запустить это без инструментов webpack или similars.

Благодаря

источник

2016-11-23 sandrina-p

Используйте это на верхней части 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/[email protected]/umd/ReactRouter.js

EDIT:

Вот пример на CodePen: http://codepen.io/lsmoura/pen/pNPOzp - это не использует операторы импорта.

источник

2016-11-23 12:35:04

Я пробовал что-то подобное с 4.0.0 и не работал. так просто нет 3.0.0 большое вам спасибо! –

для реакции на маршрут v4.0, пожалуйста, прочитайте react-router package добавить две расслоение плотной ссылки на странице:

<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;

также можно использовать

console.log(window.ReactRouterDOM);

чтобы из положить все объект понравился:

ReactRouteDOM Objects

источник

2017-08-22 02:23:12 billschen

Возможно, вы также захотите добавить 'const NavLink = window.ReactRouterDOM.NavLink;' для вложенной маршрутизации. Вот пример [Rade Router V4 Вложенная маршрутизация на Codepen] (https://codepen.io/schafeld/pen/yzvZPj?editors=1010) –

Использование React Router с CDN и без webpack или браузера

ответ

Смежные вопросы