使用React路由器與CDN和沒有webpack或瀏覽器

簡歷：我需要運行React路由器沒有wepback或類似的工具。直接從CDN鏈接，但我堅持一些require.js錯誤。使用React路由器與CDN和沒有webpack或瀏覽器

我開始用React構建我的第一個應用程序，並且我正在努力使用React路由器。

HTML：

<body> 
    <div id="container"></div> 


    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/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/[email protected]/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.

所以，我想我的反應路由器是一個老版。我改變了鏈接

<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或similars工具。

感謝

來源

2016-11-23 sandrina-p

使用這對你的JavaScript的頂部：

var Router = ReactRouter.Router; 
var Route = ReactRouter.Route; 
var IndexRoute = ReactRouter.IndexRoute; 
var Link = ReactRouter.Link; 
var browserHistory = ReactRouter.browserHistory;

並刪除import語句。

我目前使用這種反應，路由器的封裝：https://unpkg.com/[email protected]/umd/ReactRouter.js

編輯：

這裏是在CodePen一個例子：http://codepen.io/lsmoura/pen/pNPOzp - 它不使用import語句。

來源

2016-11-23 12:35:04

我試過類似的4.0.0和沒有工作。所以很容易沒有3.0.0非常感謝你！ –

用於反應路線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);

到了把所有object like like：

ReactRouteDOM Objects

來源

2017-08-22 02:23:12 billschen

您可能還需要爲嵌套路由添加 'const NavLink = window.ReactRouterDOM.NavLink;' 。這裏是一個[在Codepen上的React路由器V4嵌套路由示例]（https://codepen.io/schafeld/pen/yzvZPj?editors=1010） –

使用React路由器與CDN和沒有webpack或瀏覽器

回答

相關問題