Question

我是React的新手。我正在使用它直接添加react.js和react-dom.js文件以及browser.min.js进行javascript转换到我的HTML页面进行练习。现在，我想使用react-router，我已经从中添加了ReactRouter.js脚本文件 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方式）。谢谢。

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>
      );
  }
}

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

2 个答案: