Verwenden von React Router mit CDN und ohne Webpack oder browserify

Resume: Ich brauche React Router ohne Wepback oder ähnliche Tools. Direkt von CDN-Links, aber ich bin mit einigen require.js Fehler fest.Verwenden von React Router mit CDN und ohne Webpack oder browserify

Ich fange an, meine erste App mit React zu bauen, und ich habe Probleme mit React Router.

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"));

Alles läuft gut, aber ich bekomme diese auf der Konsole:

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.

Also, ich nehme meine reagieren Router ein alt Ausführung. Ich änderte den Link zu

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

ich darüber zu suchen und es scheint, das Problem auf der Leitung ist 1. Also änderte ich dies:

var { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } = ReactRouter;

Um dies:

import { Router, Route, IndexRoute, hashHistory, IndexLink, Link, browserHistory } from 'react-router';

Und jetzt habe ich dieses Problem:

app.js:2 Uncaught ReferenceError: require is not defined

Ich suchte nach require.js, versuchte einige Sachen, aber nichts behob mein Problem. Was vermisse ich? Ich muss das ohne Webpack oder ähnliche Tools ausführen.

Dank

Quelle

2016-11-23 sandrina-p

diese Nutzung auf Ihre javascript:

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

und entfernen Sie die import Aussagen.

ich zur Zeit mit diesem reagieren-Router-Paket: https://unpkg.com/[email protected]/umd/ReactRouter.js

EDIT:

Hier ist ein Beispiel an CodePen: http://codepen.io/lsmoura/pen/pNPOzp - es verwendet keine Import-Anweisungen.

Quelle

2016-11-23 12:35:04

Ich habe etwas ähnliches mit 4.0.0 versucht und hat nicht funktioniert. so einfach nein mit 3.0.0 vielen Dank! –

für Reaktion Route v4.0, lesen Sie bitte react-router package fügen Sie zwei js Link auf Ihrer Seite:

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

in js Code können Sie verwenden:

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;

auch können, verwenden

console.log(window.ReactRouterDOM);

, um aus all setzen Objekt wie:

ReactRouteDOM Objects

Quelle

2017-08-22 02:23:12 billschen

Sie könnten auch hinzufügen 'const NavLink = window.ReactRouterDOM.NavLink;' für verschachteltes Routing. Hier ist ein [React Router V4 geschachtelt Routing-Beispiel auf Codepen] (https://codepen.io/schafeld/pen/yzvZPj?editors=1010) –

Verwenden von React Router mit CDN und ohne Webpack oder browserify

Antwort

Verwandte Themen