IT技术 - 在没有 webpack 或 browserify 的情况下使用带有 CDN 的 React Router - 吾爱随笔录

在没有 webpack 或 browserify 的情况下使用带有 CDN 的 React Router

IT技术 javascript reactjs requirejs react-router cdn

2021-03-30 01:46:40

简历：我需要在没有 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 警告：您正在为上的getComponentprops手动调用 React.PropTypes 验证函数IndexRoute。这已被弃用，并且不会在下一个主要版本的生产中使用。由于第三方 PropTypes 库，您可能会看到此警告。

所以，我想我的react-router是一个旧版本。我把链接改成

<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 未定义

我搜索了 require.js，尝试了一些东西，但没有解决我的问题。我错过了什么？我需要在没有 webpack 或类似工具的情况下运行它。

谢谢

3个回答

对于 react route v4.0，请阅读react-router 包，在您的页面上添加两个 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);

输出所有对象，如：

ReactRouteDOM 对象

您可能还想const NavLink = window.ReactRouterDOM.NavLink;为嵌套路由添加。这是Codepen上的React Router V4 嵌套路由示例

2021-06-05 01:46:40

我们甚至需要 <script src=" unpkg.com/react-router/umd/react-router.min.js" > < /… >吗？？？？我试过删除 'react-router.min.js' cdn 和只导入 'react-router-dom.min.js' 一切仍然正常工作..

2021-06-07 01:46:40

谢谢你这实际上解决了它，以便您如何通过CDN正确导入react-router

2021-06-17 01:46:40

为我节省了一个小时的调试和挖掘时间。谢谢！

2021-06-18 01:46:40

这是如何实现这一点的最小示例：

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

顺便说一句，您可以跳过在 head 部分添加 react-router.min.js 脚本，因为 react-router-dom.min.js 是自给自足的

2021-06-18 01:46:40

在您的 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——它不使用导入语句。

我尝试了与 4.0.0 类似的东西，但没有奏效。使用 3.0.0 如此简单，非常感谢！

2021-06-09 01:46:40

其它你可能感兴趣的问题

上一篇React 父子组件中 useEffect 的正确执行顺序是什么？下一篇如何从我的浏览器包中排除“require('react')”？