Using React Router with CDN and without webpack or browserify

问题

Resume: I need to run React Router without wepback or similar tools. Directly from CDN links, but I'm stuck with some require.js error.

I'm starting to build my first App with React and I'm struggling with 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"));

Everything is running fine but i get this on console:

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.

So, I suppose my react Router is a old version. I changed the link to

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

I search about it and it seems the problem is on line 1. So I changed this:

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

To this:

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

And now I have this problem:

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

I searched for require.js, tried some stuff but nothing fixed my problem. What am I missing? I need to run this without webpack or similars tools.

Thanks

回答1:

Use this on top of your javascript:

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

and remove the import statements.

I'm currently using this react-router package: https://unpkg.com/react-router@3.0.0/umd/ReactRouter.js

EDIT:

Here's an example at CodePen: http://codepen.io/lsmoura/pen/pNPOzp -- it uses no import statements.

回答2:

for react route v4.0,please read react-router package add two js link on your page:

<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 you can use :

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;

also,can use

console.log(window.ReactRouterDOM);

to out put all object like:

ReactRouteDOM Objects

回答3:

Here's a minimal example of how this can be accomplished:

<!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@5.0.0/umd/react-router.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>

来源：https://stackoverflow.com/questions/40764596/using-react-router-with-cdn-and-without-webpack-or-browserify

标签

javascript

reactjs

requirejs

react-router

cdn