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

Posted 2023-02-21

【中文标题】如何在没有 npm 要求的情况下使用 ReactRouter CDN 方式？

【英文标题】：How to use ReactRouter CDN way without npm require?

【发布时间】：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 方式）。谢谢。

【参考方案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'));`