如何在没有npm的情况下使用ReactRouter CDN方式？

Question

我是React的新手。 我正在使用它直接添加react.js和react-dom.js文件以及browser.min.js进行javascript转换到我的HTML页面进行练习。 现在，我想使用react-router，我从这里添加了ReactRouter.js脚本文件。 但是，我无法找到任何知道如何使用它的示例。 我尝试了以下方式，但它不起作用：

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

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

你能帮助我如何使用ReactRouter.js中的路由器（CDN方式）作为例子。 谢谢。

Answer 1

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

将这些代码添加到您的顶部以获得真正的参考。

Answer 2

我同意jwong bee。

以下对我有用（我从http://programming.sereale.fr/网站上获取）：

（在普通的javascript和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>
      );
  }
});

（在ES6和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>
      );
  }
}