Menu
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/[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"));
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
getComponentprop onIndexRoute. 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
315
BrowserRouter is used for doing client side routing with URL segments. You can load a top level component for each route. This helps separate concerns in your app and makes the logic/data flow more clear.
The main difference between the two is the way they store the URL and communicate with your web server. A <BrowserRouter> uses regular URL paths.
Example 1: Routing without Switch component – When we perform routing using React Router, whenever a page is rendered the URL path is being matched to each route. All the route paths that match the given URL path are rendered.
React Router is a standard library for routing in React. It enables navigation between views from different components in a React application, allows the browser URL to be changed, and keeps the UI in sync with the URL.
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
198
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
