网站服务器租用合同,wordpress页面定制,网页设计简单作品代码,做网站销售有前景笔记内容转载自 AcWing 的 Web 应用课讲义#xff0c;课程链接#xff1a;AcWing Web 应用课。 CONTENTS 1. Web分类2. Route组件3. URL中传递参数4. Search Params传递参数5. 重定向6. 嵌套路由 本节内容是如何将页面和 URL 一一对应起来。
1. Web分类
Web 页面可以分为两…笔记内容转载自 AcWing 的 Web 应用课讲义课程链接AcWing Web 应用课。 CONTENTS 1. Web分类2. Route组件3. URL中传递参数4. Search Params传递参数5. 重定向6. 嵌套路由 本节内容是如何将页面和 URL 一一对应起来。
1. Web分类
Web 页面可以分为两大类
静态页面页面里的数据是写死的即整个文件存放在服务器上当用户访问 URL 时服务器原封不动地将页面信息传给前端。动态页面页面里的数据是动态填充的即服务器上存的是页面的模板数据是存到数据库里的当用户打开页面时会动态将这个页面拼接起来。现在一般都是动态页面。 后端渲染数据在后端填充即模板与数据的拼接操作是在服务器端进行的。客户端向服务器端发送 URL服务器端返回拼接好的页面。前端渲染数据在前端填充即模板与数据的拼接操作是在用户的浏览器进行的。第一次打开页面时客户端向服务器端发送 URL服务器端返回所有页面的模板渲染的时候根据当前需要哪些数据再向服务器端请求数据第二次打开页面时直接用 JS 刷新当前页面不一定会向后端发送请求。
2. Route组件
Route 组件可以让我们的前端页面也可以和 URL 唯一对应起来使得前端渲染的模式看起来假装和后端渲染是一样的。
我们创建一个新的项目 route-app然后用 VS Code 打开项目
create-react-app route-app配置一下环境
VS Code 安装插件Auto Import - ES6, TS, JSX, TSX安装 Route 组件在项目根目录下安装安装好后重启一下 VS Codenpm i react-router-dom安装 Bootstrapnpm i bootstrap
Route 组件介绍
BrowserRouter所有需要路由的组件都要包裹在 BrowserRouter 组件内Link跳转到某个链接但是没有向后端发请求to 属性表示跳转到的链接Routes类似于 C 中的 switch但是只匹配第一个路径即从前往后看每个 Route判断当前链接是否等于 Route 中的链接如果是则渲染 Route 中的组件之后的就不继续往下判断了Route路由path 属性表示路径element 属性表示路由到的内容组件。
我们先创建好我们项目的根组件 App、导航栏 NavBar以及多个子页面的组件Home、Linux、Django、Web、NotFound。
NavBar 代码如下
import React, { Component } from react;class NavBar extends Component {state { } render() {return (nav classNamenavbar navbar-expand-lg bg-body-tertiarydiv classNamecontainer-fluida classNamenavbar-brand href/讲义/abutton classNamenavbar-toggler typebutton data-bs-togglecollapse data-bs-target#navbarNavAltMarkup aria-controlsnavbarNavAltMarkup aria-expandedfalse aria-labelToggle navigationspan classNamenavbar-toggler-icon/span/buttondiv classNamecollapse navbar-collapse idnavbarNavAltMarkupdiv classNamenavbar-nava classNamenav-link active aria-currentpage href/Home/aa classNamenav-link href/linuxLinux/aa classNamenav-link href/djangoDjango/aa classNamenav-link href/webWeb/a/div/div/div/nav);}
}export default NavBar;App 代码如下
import React, { Component } from react;
import NavBar from ./navbar;
import Home from ./home;
import Linux from ./linux;
import Django from ./django;
import Web from ./web;
import NotFound from ./notfound;class App extends Component {state { } render() {return (React.FragmentNavBar //React.Fragment);}
}export default App;Home、Linux、Django、Web、NotFound 代码类似只展示一个
import React, { Component } from react;class Home extends Component {state { } render() {return (h1Home/h1);}
}export default Home;现在我们根据 URL 来渲染页面注意此时还是属于后端渲染每次都会重新加载页面我们修改 App
import React, { Component } from react;
import NavBar from ./navbar;
import Home from ./home;
import Linux from ./linux;
import Django from ./django;
import Web from ./web;
import NotFound from ./notfound;
import { Routes, Route } from react-router-domclass App extends Component {state { } render() {return (React.FragmentNavBar /Routes // 一定要将路由包含在Routes里面里面会有很多个RouteRoute path/ element{Home /} / // 如果链接为/就跳到Home组件Route path/linux element{Linux /} /Route path/django element{Django /} /Route path/web element{Web /} //Routes/React.Fragment);}
}export default App;现在我们用 Link 替换 NavBar 中的链接标签 a这样就变为了前端渲染
import React, { Component } from react;
import { Link } from react-router-domclass NavBar extends Component {state { } render() {return (nav classNamenavbar navbar-expand-lg bg-body-tertiarydiv classNamecontainer-fluidLink classNamenavbar-brand to/讲义/Linkbutton classNamenavbar-toggler typebutton data-bs-togglecollapse data-bs-target#navbarNavAltMarkup aria-controlsnavbarNavAltMarkup aria-expandedfalse aria-labelToggle navigationspan classNamenavbar-toggler-icon/span/buttondiv classNamecollapse navbar-collapse idnavbarNavAltMarkupdiv classNamenavbar-navLink classNamenav-link aria-currentpage to/Home/LinkLink classNamenav-link to/linuxLinux/LinkLink classNamenav-link to/djangoDjango/LinkLink classNamenav-link to/webWeb/Link/div/div/div/nav);}
}export default NavBar;3. URL中传递参数
当网站的页面数量很多的时候我们肯定不可能去写那么多个 Route。
假设我们现在有几篇 Web 讲义第 i i i 篇的路由链接为/web/content/i
import React, { Component } from react;
import { Link } from react-router-domclass Web extends Component {state {webs: [{id: 1, title: HTML基础标签},{id: 2, title: CSS},{id: 3, title: JavaScript},{id: 4, title: 中期项目-拳皇},{id: 5, title: React},]} render() {return (React.Fragmenth1Web/h1hr /div{this.state.webs.map(web (div key{web.id}Link to{/web/content/${web.id}}{web.id . web.title}/Link/div))}/div/React.Fragment);}
}export default Web;我们先实现一下讲义内容的组件 WebContent
import React, { Component } from react;class WebContent extends Component {state { } render() {return (h1Web Content/h1);}
}export default WebContent;然后在 App 中写一下路由我们不能写多个 Route path/web/content/i element{WebContent /} /而是用 :xxx
import React, { Component } from react;
import NavBar from ./navbar;
import Home from ./home;
import Linux from ./linux;
import Django from ./django;
import Web from ./web;
import WebContent from ./webcontent;
import NotFound from ./notfound;
import { Routes, Route } from react-router-domclass App extends Component {state { } render() {return (React.FragmentNavBar /div classNamecontainerRoutes // 一定要将路由包含在Routes里面里面会有很多个RouteRoute path/ element{Home /} / // 如果链接为/就跳到Home组件Route path/linux element{Linux /} /Route path/django element{Django /} /Route path/web element{Web /} /Route path/web/content/:chapter element{WebContent /} //Routes/div/React.Fragment);}
}export default App;现在我们如何在 WebContent 中获取 :chapter 参数呢先看一下函数组件获取参数的方式可以直接用 useParams 函数获取参数
import React from react;
import { useParams } from react-router-dom;const WebContent () {console.log(useParams())return (h1Web Content - {useParams().chapter}/h1);
}export default WebContent;如果是类组件的话就需要先套一层函数组件然后把 useParams 函数作为参数传给自己
import React, { Component } from react;
import { useParams } from react-router-dom;class WebContent extends Component {state { } render() {console.log(this.props.params)return (h1Web Content - {this.props.params.chapter}/h1);}
}export default (props) (WebContent{...props} // 先把函数组件里面的属性展开params{useParams()}/
);4. Search Params传递参数
如果网站链接形式为/web/content?chapter3这样的链接也可以获取参数。
我们先改一下 Web 中的链接形式
import React, { Component } from react;
import { Link } from react-router-domclass Web extends Component {state {webs: [...]} render() {return (React.Fragmenth1Web/h1hr /div{this.state.webs.map(web (div key{web.id}Link to{/web/content?chapter${web.id}}{web.id . web.title}/Link/div))}/div/React.Fragment);}
}export default Web;然后在 WebContent 中获取链接的参数
import React, { Component } from react;
import { useSearchParams } from react-router-dom;
import { Link } from react-router-domclass WebContent extends Component {state {searchParams: this.props.params[0], // 用于获取某一个参数setSearchParams: this.props.params[1], // 用于设置链接里的参数重新渲染页面};render() {console.log(this.state.searchParams.get(chapter))return (React.Fragmenth1Web Content - {this.state.searchParams.get(chapter)}/h1hr /div讲义内容/divhr /Link to/web返回上一级/Link/React.Fragment);}
}export default (props) (WebContent{...props} // 先把函数组件里面的属性展开params{useSearchParams()}/
);函数组件的写法如下
import React from react;
import { useSearchParams } from react-router-dom;
import { Link } from react-router-domconst WebContent () {let [searchParams, setSearchParams] useSearchParams();console.log(searchParams.get(chapter));return (React.Fragmenth1Web Content - {searchParams.get(chapter)}/h1hr /div讲义内容/divhr /Link to/web返回上一级/Link/React.Fragment);
}export default WebContent;5. 重定向
当打开一个不存在的链接时应该重定向到 404 Not Found我们先将这个路由定义出来Route path/404 element{NotFound /} /。
使用 Navigate 组件可以重定向我们可以使用通配符 * 匹配其余的所有路径然后将其重定向到 /404 页面即可
import React, { Component } from react;
import NavBar from ./navbar;
import Home from ./home;
import Linux from ./linux;
import Django from ./django;
import Web from ./web;
import WebContent from ./webcontent;
import NotFound from ./notfound;
import { Routes, Route, Navigate } from react-router-domclass App extends Component {state { } render() {return (React.FragmentNavBar /div classNamecontainerRoutes // 一定要将路由包含在Routes里面里面会有很多个RouteRoute path/ element{Home /} / // 如果链接为/就跳到Home组件Route path/linux element{Linux /} /Route path/django element{Django /} /Route path/web element{Web /} /Route path/web/content element{WebContent /} /Route path/404 element{NotFound /} /Route path* element{Navigate replace to/404 /} //Routes/div/React.Fragment);}
}export default App;6. 嵌套路由
假设 Linux 组件中有两个子模块 Homework 和 Terminal我们可以在 App 中创建嵌套路由
import React, { Component } from react;
import NavBar from ./navbar;
import Home from ./home;
import Linux from ./linux;
import Django from ./django;
import Web from ./web;
import WebContent from ./webcontent;
import NotFound from ./notfound;
import { Routes, Route, Navigate } from react-router-domclass App extends Component {state { } render() {return (React.FragmentNavBar /div classNamecontainerRoutes // 一定要将路由包含在Routes里面里面会有很多个RouteRoute path/ element{Home /} / // 如果链接为/就跳到Home组件Route path/linux element{Linux /}Route pathhomework element{h4Homework/h4} /Route pathterminal element{h4Terminal/h4} //RouteRoute path/django element{Django /} /Route path/web element{Web /} /Route path/web/content element{WebContent /} /Route path/404 element{NotFound /} /Route path* element{Navigate replace to/404 /} //Routes/div/React.Fragment);}
}export default App;但是现在执行网页 /linux/homework 时不会渲染出子路由的内容我们需要在父组件中添加 Outlet / 组件用来填充子组件的内容
import React, { Component } from react;
import { Link, Outlet } from react-router-domclass Linux extends Component {state { } render() {return (React.Fragmenth1Linux/h1hr /ul classNamenav justify-content-centerli classNamenav-itemLink classNamenav-link to/linux/homeworkHomework/Link/lili classNamenav-itemLink classNamenav-link to/linux/terminalTerminal/Link/li/ulhr /Outlet //React.Fragment);}
}export default Linux;
