在CDN上使用React Router且不使用webpack或browserify [英] Using React Router with CDN and without webpack or browserify
问题描述
恢复：我需要在没有wepback或类似工具的情况下运行React Router。直接来自CDN链接，但是我遇到了一些require.js错误。
Resume: I need to run React Router without wepback or similar tools. Directly from CDN links, but I'm stuck with some require.js error.
我开始构建自己的
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"));
一切运行正常，但我在控制台上看到了：
Everything is running fine but i get this on console:
react.js：3639警告：您正在为
getComponent道具手动调用React.PropTypes
验证函数在IndexRoute上。该
已过时，将无法在下一个主要
版本中进行生产。您可能会由于第三方PropTypes
库而看到此警告。
react.js:3639 Warning: You are manually calling a React.PropTypes validation function for the
getComponentprop onIndexRoute. 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.
所以，我想我的React Router是旧版本。我将链接更改为
So, I suppose my react Router is a old version. I changed the link to
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-0/react-router.js"></script>
警告：React.createElement：类型不应为null，未定义，
布尔值或数字。它应该是一个字符串（用于DOM元素）或
ReactClass（用于复合组件）。
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行上。所以我更改了此代码：
I search about it and it seems the problem is on line 1. So I changed this:
var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = ReactRouter;
到此：
import { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } from 'react-router';
现在我遇到了这个问题：
And now I have this problem:
app.js：2未捕获的ReferenceError：未定义require
app.js:2 Uncaught ReferenceError: require is not defined
我搜索了require.js，尝试了一些东西，但没有解决我的问题。我想念什么？我需要在没有webpack或类似工具的情况下运行它。
I searched for require.js, tried some stuff but nothing fixed my problem. What am I missing? I need to run this without webpack or similars tools.
谢谢
推荐答案
在您的javascript上使用它：
Use this on top of your javascript:
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var IndexRoute = ReactRouter.IndexRoute;
var Link = ReactRouter.Link;
var browserHistory = ReactRouter.browserHistory;
并删除 import 语句。
我当前正在使用此react-router软件包： https://unpkg.com/react-router@3.0.0/umd/ReactRouter。 js
I'm currently using this react-router package: https://unpkg.com/react-router@3.0.0/umd/ReactRouter.js
编辑：
下面是CodePen的示例： http://codepen.io/lsmoura/pen/pNPOzp －它不使用导入语句。
Here's an example at CodePen: http://codepen.io/lsmoura/pen/pNPOzp -- it uses no import statements.
这篇关于在CDN上使用React Router且不使用webpack或browserify的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
