CODEWITHSUNDEEP
javascripthtmlreactjsreact-router
Madav
Madav

Reputation: 311

How to use ReactRouter CDN way without npm require?

I am new to React. I am using it by directly adding the react.js and react-dom.js files along with browser.min.js for javascript transformation in to my HTML page for practice. Now, I want to use react-router for which I have added ReactRouter.js script file from here. However, I am not able to find any examples to know how to use it. I have tried the following way and its not working:

  <Router history={history}>
    <Route path="/" component={MainComponent}>
      //<Route path="topics/:id" compponent={Topic} />
    </Route>
  </Router>

  ReactDOM.render(<Router />,  document.getElementById('wrapper'));

Can you please help me how to use Router from ReactRouter.js (CDN way) with an example. Thank you.

Upvotes: 4

Views: 2853

Answers (2)

Johnf39
Johnf39

Reputation: 101

I agree with jwong bee.

The following worked for me (I took it from http://programming.sereale.fr/ website):

(in plain javascript and jsx)

var ReactRouter = window.ReactRouter
var Router = ReactRouter.Router
var Route = ReactRouter.Route
var Link = ReactRouter.Link
var Redirect = ReactRouter.Redirect
var browserHistory = ReactRouter.browserHistory

var StaticRoute = React.createClass({
  render: function() {
    return (
        <Router history={browserHistory}>
          <Redirect from="/" to="/dashboard" />
          <Route path="/" component={AppComponent}>            
            <Route path="/dashboard" component={DashboardComponent}></Route>
            <Route path="/heroes-list" component={HeroesComponent}></Route>
            <Route path="/hero-detail/:id" component={HeroDetailComponent} />
          </Route>
        </Router>
      );
  }
});

(in ES6 and jsx)

let ReactRouter = window.ReactRouter
let Router = ReactRouter.Router
let Route = ReactRouter.Route
let Link = ReactRouter.Link
let Redirect = ReactRouter.Redirect
let browserHistory = ReactRouter.browserHistory

class StaticRoute extends React.Component {
  render () {
    return (
        <Router history={browserHistory}>
          <Redirect from="/" to="/dashboard" />
          <Route path="/" component={AppComponent}>            
            <Route path="/dashboard" component={DashboardComponent}></Route>
            <Route path="/heroes-list" component={HeroesComponent}></Route>
            <Route path="/hero-detail/:id" component={HeroDetailComponent} />
          </Route>
        </Router>
      );
  }
}

Upvotes: 3

nof
nof

Reputation: 1254

let Router = window.ReactRouter;
let RouteHandler = Router.RouteHandler;
let Route = Router.Route;
let DefaultRoute = Router.DefaultRoute;

Add these codes to the top of yours to get the true reference.

Upvotes: 5

Related Questions