杭州电子商务研究院

使用 React Router 和 CDN 链接

2020-11-07 08:00飞浪

介绍

当您在学习新库或在开发模式下探索新概念时，使用CDN会很方便，因为它们只需要最少的设置，只需几行代码即可启动并运行。作为初学者，要学习和探索 React Router，您可以使用简单的 CDN 设置，而无需繁琐的 webpack 配置。在本指南中，您将学习如何使用 CDN 链接使用 React 和 React Router。

设置

使用以下样板创建一个名为index.html的新文件。

      <!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
  </head>
  <body>
    <div id='root'></div>
    <script type='text/babel'>

    </script>
  </body>
</html>

<body>中的<div>是 React App 的 DOM 所在位置。<body>后面的<script>是向 React 编写常规 JavaScript的地方。接下来，将 CDN 链接作为 React、ReactDOM、React-Router-DOM 和 Babel 的脚本包含进去，如下所示

      <head>
    <meta charset='UTF-8'>
    <script src='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'>    </script>
    <script src='https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
  </head>

现在您已准备好在此 HTML 文件中使用 React 和 React-Router-DOM。

导入 React Router 元素

React Router 提供HashRouter、Route、Link等组件，用于不同用途。在常规 React-CLI (Create-React-App) 项目中，安装react-router-dom作为依赖项并导入组件，如下所示。

      import {Route,Link, HashRouter} from 'react-router-dom';

但是，在常规 JavaScript 文件中，您需要将这些组件作为可通过 CDN（React-Router-DOM 的脚本）获得的ReactRouterDOM全局对象的属性来调用，并将其分配给变量以使用它。因此，为了使用Link和Route组件，您需要执行以下操作：

      const Link = ReactRouterDOM.Link;
const Route = ReactRouterDOM.Route;

创建应用程序组件

让我们创建一个简单的钩子组件，即App Component，如下所示，并将其呈现在 DOM 上。

      const App = () => (
       
 )
ReactDOM.render(<App />, document.querySelector('#root'));

接下来，在这个组件里面添加一些链接。

      const App = () => (
        <ReactRouterDOM.HashRouter>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/login">Login</Link></li>
            <li><Link to="/register">Register</Link></li>
          </ul>
        </ReactRouterDOM.HashRouter>
)

HashRouter组件直接从ReactRouterDOM全局对象调用。除了上一节中展示的方法之外，这是另一种需要 React-Router-DOM 组件的方法。

最后设置一些简单的路线，如下所示。

      <Route path="/" exact component={Home} />
 <Route path="/login" component={Login} />
 <Route path="/register" component={Register} />

创建子组件

在请求路由/login时，路由组件会呈现登录组件。创建这些子组件，以便在每次请求其路由时显示不同的消息。

      const Home = () => <h1>Home</h1>
 const Login = () => <h1>Login</h1>
 const Register = () => <h1>Register</h1>

运行此 HTML 文件并点击登录链接。当前路由更改为/login而不是/，并呈现登录组件。同样，可以通过点击注册链接来呈现注册组件。

看看下面的整个index.html文件。

      <!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <script src='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/react-router-dom@5.0.0/umd/react-router-dom.min.js'></script>
    <script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
  </head>
  <body>
    <div id='root'></div>
    <script type='text/babel'>
      const Link = ReactRouterDOM.Link;
      const Route = ReactRouterDOM.Route;

      const App = () => (
        <ReactRouterDOM.HashRouter>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/login">Login</Link></li>
            <li><Link to="/register">Register</Link></li>
          </ul>

          <Route path="/" exact component={Home} />
          <Route path="/login" component={Login} />
          <Route path="/register" component={Register} />
        </ReactRouterDOM.HashRouter>
      )

      const Home = () => <h1>Home</h1>
      const Login = () => <h1>Login</h1>
      const Register = () => <h1>Register</h1>

      ReactDOM.render(<App />, document.querySelector('#root'));
    </script>
  </body>
</html>

结论

使用 CDN 进行开发可以提供更快的开发环境，您可以根据需要进行探索和试验。当您仅通过提供 HTML 文件来开发后端应用程序时，它也很方便，因此您无需单独设置使用它的前端项目。您可以先通过 CDN 探索大型 React 库（如 Redux）以节省时间，然后在您的 Create-React-App 项目中使用它们。如果您有任何疑问，请随时通过CodeAlphabet与我联系。

免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
查看原文
曝光35980浏览1903