免费申请个人网站申请,建站快车品牌,ui人机界面设计,怎样建设网站最好第五章 React 路由
一、相关理解
1. SPA 的理解
单页 Web 应用#xff08;single page web application#xff0c;SPA#xff09;。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面#xff0c;只会做页面的局部更新。数据都需要通过 ajax 请求获取, 并在前端…第五章 React 路由
一、相关理解
1. SPA 的理解
单页 Web 应用single page web applicationSPA。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面只会做页面的局部更新。数据都需要通过 ajax 请求获取, 并在前端异步展现。
2. 路由的理解
2.1 什么是路由?
一个路由就是一个映射关系(key:value)key 为路径, value 可能是 function 或 component
2.2 路由分类
2.2.1 后端路由
理解 value 是 function, 用来处理客户端提交的请求。注册路由 router.get(path, function(req, res))工作过程当 node 接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
2.2.2 前端路由
浏览器端路由value 是 component用于展示页面内容。注册路由: Route path“/test” component{Test}工作过程当浏览器的 path 变为/test 时, 当前路由组件就会变为 Test 组件
3. react-router-dom 的理解
react 的一个插件库。专门用来实现一个 SPA 应用。基于 react 的项目基本都会用到此库。
二、react-router-dom 相关 API
1. 内置组件
BrowserRouterHashRouterRouteRedirectLinkNavLinkSwitch
2. 其它
history 对象match 对象withRouter 函数
三、基本路由使用
1. 效果 2. 准备
2.1 下载 react-router-dom
npm install --save react-router-dom
2.2 引入 bootstrap.css:
link rel“stylesheet” href“/css/bootstrap.css”
2.3 注意
由于 react-router-dom 在 2021 年 11 月份升级到了 6 版本此处是 5 版本的代码展示需要执行
npm i react-router-dom5最新的 6 版本使用会在后续更新
3. 代码 - 路由的基本使用
3.1 index.js
/* src/index.js */
//引入react核心库
import React from react;
//引入ReactDOM
import ReactDOM from react-dom;
import { BrowserRouter } from react-router-dom;
//引入App组件
import App from ./App;//渲染App到页面
ReactDOM.render(BrowserRouterApp //BrowserRouter,document.getElementById(root)
);3.2 App
/* src/App.jsx */
import React, { Component } from react;
import { Link, Route } from react-router-dom;
import Home from ./components/Home;
import About from ./components/About;export default class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8div classNamepage-headerh2React Router Demo/h2/div/div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-group{/* 原生html中靠a跳转不同的页面 */}{/* a classNamelist-group-item active href./about.htmlAbout/aa classNamelist-group-item href./home.htmlHome/a */}{/* 在React中靠路由链接实现切换组件 -- 编写路由链接 */}Link classNamelist-group-item to/aboutAbout/LinkLink classNamelist-group-item to/homeHome/Link/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-body{/* 注册路由 */}Route path/about component{About} /Route path/home component{Home} //div/div/div/div/div);}
}3.3 Home
/* src/components/Home/index.jsx */
import React, { Component } from reactexport default class index extends Component {render() {return (h3我是Home的内容/h3)}
}3.4 About
/* src/components/About/index.jsx */
import React, { Component } from reactexport default class index extends Component {render() {return (h3我是About的内容/h3)}
}3.5 总结
1.明确好界面中的导航区、展示区
2.导航区的a标签改为Link标签Link to/xxxxxDemo/Link
3.展示区写Route标签进行路径的匹配Route path/xxxx component{Demo}/
4.App的最外侧包裹了一个BrowserRouter或HashRouter4. 代码 - 路由组件与一般组件
4.1 App
/* src/App.jsx */
import React, { Component } from react;
import { Link, Route } from react-router-dom;
import Home from ./pages/Home; //Home是路由组件
import About from ./pages/About; //About是路由组件
import Header from ./components/Header; //Header是一般组件export default class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8Header//div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-groupLink classNamelist-group-item to/aboutAbout/LinkLink classNamelist-group-item to/homeHome/Link/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-body{/* 注册路由 */}Route path/about component{About} /Route path/home component{Home} //div/div/div/div/div);}
}4.2 Header
/* src/components/Header/index.jsx */
import React, { Component } from react;export default class index extends Component {render() {return (div classNamepage-headerh2React Router Demo/h2/div);}
}4.3 About
/* src/pages/About/index.jsx */
import React, { Component } from reactexport default class index extends Component {render() {console.log(About组件收到的props是, this.props);return (h3我是About的内容/h3)}
}4.4 总结
1.写法不同一般组件Demo/路由组件Route path/demo component{Demo}/
2.存放位置不同一般组件components路由组件pages
3.接收到的props不同一般组件写组件标签时传递了什么就能收到什么路由组件接收到三个固定的属性history:go: ƒ go(n)goBack: ƒ goBack()goForward: ƒ goForward()push: ƒ push(path, state)replace: ƒ replace(path, state)location:pathname: /aboutsearch: state: undefinedmatch:params: {}path: /abouturl: /about5. 代码 - NavLink 的使用
5.1 App
/* src/App.jsx */
import React, { Component } from react;
import { Route } from react-router-dom;
import Home from ./pages/Home; //Home是路由组件
import About from ./pages/About; //About是路由组件
import Header from ./components/Header; //Header是一般组件export default class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8Header//div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-groupNavLink activeClassNamealex classNamelist-group-item to/aboutAbout/NavLinkNavLink activeClassNamealex classNamelist-group-item to/homeHome/NavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-body{/* 注册路由 */}Route path/about component{About} /Route path/home component{Home} //div/div/div/div/div);}
}5.2 index.html
!-- public/index.html --
!DOCTYPE html
htmlheadmeta charsetUTF-8 /titleReact App/titlelink relicon href%PUBLIC_URL%/favicon.ico /link relstylesheet href/css/bootstrap.cssstyle.alex{background-color: rgb(209, 137, 4) !important;color: white !important;}/style/headbodydiv idroot/div/body
/html6. 代码 - 封装 NavLink 组件
6.1 App
/* src/App.jsx */
import React, { Component } from react;
import { NavLink, Route } from react-router-dom;
import Home from ./pages/Home; //Home是路由组件
import About from ./pages/About; //About是路由组件
import Header from ./components/Header; //Header是一般组件
import MyNavLink from ./components/MyNavLink;export default class App extends Component {render() {return (divdiv classNamerowdiv classNamecol-xs-offset-2 col-xs-8Header//div/divdiv classNamerowdiv classNamecol-xs-2 col-xs-offset-2div classNamelist-group{/* 在React中靠路由链接实现切换组件 -- 编写路由链接 */}MyNavLink to/aboutAbout/MyNavLinkMyNavLink to/homeHome/MyNavLink/div/divdiv classNamecol-xs-6div classNamepaneldiv classNamepanel-body{/* 注册路由 */}Route path/about component{About} /Route path/home component{Home} //div/div/div/div/div);}
}6.2 MyNavLink
/* src/components/MyNavLink/index.jsx */
import React, { Component } from react;
import { NavLink } from react-router-dom;export default class MyNavLink extends Component {render() {return (NavLink activeClassNamealex classNamelist-group-item {...this.props}/);}
}6.3 总结
1.NavLink可以实现路由链接的高亮通过activeClassName指定样式名
2.标签体内容是一个特殊的标签属性
3.通过this.props.children可以获取标签体内容
