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

【问题标题】：How to use ReactRouter CDN way without npm require?如何在没有 npm 要求的情况下使用 ReactRouter CDN 方式？
【发布时间】：2016-03-01 16:25:35
【问题描述】：

我是 React 新手。我通过直接添加 react.js 和 react-dom.js 文件以及 browser.min.js 来使用它，以便将 javascript 转换到我的 HTML 页面中进行练习。现在，我想使用我添加了 ReactRouter.js 脚本文件的 react-router here。但是，我找不到任何示例来了解如何使用它。我尝试了以下方法，但它不起作用：

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

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

您能否通过示例帮助我如何使用 ReactRouter.js 中的路由器（CDN 方式）。谢谢。

【问题讨论】：

标签： javascript html reactjs react-router

【解决方案1】：

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

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

【讨论】：

【解决方案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>
      );
  }
}

【讨论】：

之后，添加`ReactDOM.render(, document.getElementById('wrapper'));`