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

Question

恢复：我需要运行没有wepback或类似工具的React Router。直接来自 CDN links，但我遇到了一些 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 Warning: You are manually calling a React.PropTypes validation function for the getComponent prop on IndexRoute. 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 是旧版本。我将 link 更改为

<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).

我搜索了一下，好像问题出在第 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 或类似工具的情况下运行。

谢谢

Answer 1

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

Answer 2

react route v4.0，请阅读react-router package 在你的页面上添加两个 js link:

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

Answer 3

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

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

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

Using React Router with CDN and without webpack or browserify

javascript

cdn

requirejs

reactjs

react-router