使用 React Router 和 CDN 链接
介绍
当您在学习新库或在开发模式下探索新概念时,使用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与我联系。
免责声明:本内容来源于第三方作者授权、网友推荐或互联网整理,旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有,其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况,请与我们取得联系,我们将尽快进行相关处理与修改。感谢您的理解与支持!
请先 登录后发表评论 ~