san*_*a-p 15 javascript cdn requirejs reactjs react-router
简历:我需要在没有wepback或类似工具的情况下运行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警告:您正在手动调用
getComponentprop 的React.PropTypes验证函数IndexRoute.这已被弃用,在下一个主要版本的生产中无法使用.由于第三方PropTypes库,您可能会看到此警告.
所以,我想我的反应路由器是旧版本.我将链接更改为
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-0/react-router.js"></script>
警告:React.createElement:type不应为null,undefined,boolean或number.它应该是一个字符串(对于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未捕获的ReferenceError:未定义require
我搜索了require.js,尝试了一些东西,但没有解决我的问题.我错过了什么？我需要在没有webpack或similars工具的情况下运行它.
谢谢
小智 17
对于react route v4.0,请阅读react-router package 在你的页面上添加两个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;
还可以使用
console.log(window.ReactRouterDOM);
把所有对象都放出来:
duh*_*ime 10
这是如何实现这一点的最小示例：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script src='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script>
<script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script>
<script src='https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js'></script>
<script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
</head>
<body>
<div id='root'></div>
<script type='text/babel'>
const Link = ReactRouterDOM.Link,
Route = ReactRouterDOM.Route;
const App = props => (
<ReactRouterDOM.HashRouter>
<ul>
<li><Link to="/">TO HOME</Link></li>
<li><Link to="/a">TO A</Link></li>
<li><Link to="/b">TO B</Link></li>
</ul>
<Route path="/" exact component={Home} />
<Route path="/a" component={A} />
<Route path="/b" component={B} />
</ReactRouterDOM.HashRouter>
)
const Home = props => <h1>HOME</h1>
const A = props => <h1>A</h1>
const B = props => <h1>B</h1>
ReactDOM.render(<App />, document.querySelector('#root'));
</script>
</body>
</html>在您的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 －它不使用import语句。
| 归档时间： |
|
| 查看次数： |
7064 次 |
| 最近记录： |