score:9

Accepted answer

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.

score:10

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

score:20

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


Related Query

More Query from same tag