All geek questions in one place

Using React Router with CDN and without webpack or browser

Summary I need to run React Router without using wepback or similar tools. Straight from the CDN links, but I'm stuck with some require.js error.

I am starting to build my first application using React, and I am 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 works fine, but I get this on the console:

react.js: 3639 Warning: you manually call the React.PropTypes validation function for getComponent prop on IndexRoute . This one is outdated and will not work in production with the next major version. Perhaps you see this warning due to the third-party PropTypes library.

So, I suppose my Router is an 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: the type must not be null, undefined, boolean or number. It must be a string (for DOM elements) or a ReactClass (for composite components).

I am looking for this and the problem seems to be on line 1. So I changed this:

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

For this:

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

And now I have this problem:

app.js: 2 Uncaught ReferenceError: require not defined

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

thanks

+11
source share
3 answers

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 delete the import statements.

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

EDIT:

Here is an example in CodePen: http://codepen.io/lsmoura/pen/pNPOzp - it does not use any import statements.

+3
source

to respond to route v4.0, please read the package respond to the router and add two js links to 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;

can also be used

 console.log(window.ReactRouterDOM);

to put all objects like:

ReactRouteDOM Objects

+13
source

Here is a minimal example of how this can be done:

 <!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>
0
source

Source: https://habr.com/ru/post/1260210/

More articles:


All Articles