简历: 我需要在没有webpack或类似工具的情况下运行React Router。直接从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中的验证函数,用于IndexRoute上的getComponent prop。这已被弃用,并且在下一个主要版本发布后将无法在生产中使用。您可能会因第三方PropTypes库而看到此警告。
所以,我猜我的react Router是旧版本。我改变了链接为
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-0/react-router.js"></script>
警告:React.createElement:类型不应为null、undefined、布尔值或数字。它应该是一个字符串(用于DOM元素)或一个ReactClass(用于复合组件)。
我搜索了一下,看起来问题出在第一行。所以我修改了这个:
var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = ReactRouter;
变成这样:
import { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } from 'react-router';
现在我有这个问题:
app.js:2 抛出 ReferenceError: require 未定义
我搜索了 require.js,并尝试了一些方法,但仍然无法解决我的问题。我漏掉了什么?我需要在没有 webpack 或类似工具的情况下运行它。
谢谢
const NavLink = window.ReactRouterDOM.NavLink;
用于嵌套路由。 这里有一个React Router V4嵌套路由示例在Codepen上。 - Oliver Schafeld