在没有 webpack 或 browserify 的情况下使用带有 CDN 的 React Router [英] Using React Router with CDN and without webpack or browserify
问题描述
恢复:我需要在没有 wepback 或类似工具的情况下运行 React Router.直接来自 CDN 链接，但我遇到了一些 require.js 错误.
<小时>我开始用 React 构建我的第一个应用程序，但我正在用 React Router 苦苦挣扎.
HTML:
<div id="容器"></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>JS:
var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = ReactRouter;//一些类ReactDOM.render((<路由器历史={hashHistory}><Route path="/" component={Window}><IndexRoute 组件={InitialPage}/><Route path="register" component={Register}/><Route path="search" component={Search}/></路线></路由器>), document.getElementById("容器"));一切正常，但我在控制台上得到了这个:
<块引用>react.js:3639 警告:您正在手动调用 React.PropTypesIndexRoute 上的 getComponent 道具的验证函数.这已弃用，将无法在下一个专业的生产中使用版本.由于第三方 PropTypes，您可能会看到此警告图书馆.
所以，我想我的反应路由器是旧版本.我把链接改成
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-0/react-router.js"></script><块引用>
警告:React.createElement:类型不应为空、未定义、布尔值或数字.它应该是一个字符串(对于 DOM 元素)或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 is not defined
我搜索了 require.js，尝试了一些东西，但没有解决我的问题.我错过了什么?我需要在没有 webpack 或类似工具的情况下运行它.
谢谢
在你的 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
这是 CodePen 的一个例子:http://codepen.io/lsmoura/pen/pNPOzp -- 它不使用导入语句.
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.
I'm starting to build my first App with React and I'm struggling with 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"));
Everything is running fine but i get this on console:
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.
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>
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).
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;
To this:
import { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } from 'react-router';
And now I have this problem:
app.js:2 Uncaught ReferenceError: require is not defined
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.
Thanks
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;
and remove the import statements.
I'm currently using this react-router package: https://unpkg.com/react-router@3.0.0/umd/ReactRouter.js
EDIT:
Here's an example at CodePen: http://codepen.io/lsmoura/pen/pNPOzp -- it uses no import statements.
这篇关于在没有 webpack 或 browserify 的情况下使用带有 CDN 的 React Router的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
