Using React Router with CDN and without webpack or browserify Using React Router with CDN and without webpack or browserify javascript javascript

Using React Router with CDN and without webpack or browserify


javascript reactjs requirejs react-router cdn

for react route v4.0,please read react-router packageadd 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

javascript reactjs requirejs react-router cdn

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