做不了大流量网站,建设公司内网网站的意义,网站备案网站要有内容吗,应用制作下载千锋学习视频https://www.bilibili.com/video/BV1dP4y1c7qd?p72spm_id_frompageDrivervd_sourcef07a5c4baae42e64ab4bebdd9f3cd1b3 1.React 路由
1.1 什么是路由#xff1f; 路由是根据不同的 url 地址展示不同的内容或页面。 一个针对React而设计的路由解决方案…千锋学习视频https://www.bilibili.com/video/BV1dP4y1c7qd?p72spm_id_frompageDrivervd_sourcef07a5c4baae42e64ab4bebdd9f3cd1b3 1.React 路由
1.1 什么是路由 路由是根据不同的 url 地址展示不同的内容或页面。 一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到URl之间的同步映射关系。
1.2 路由安装
npm i react-router-dom5
1.3 路由使用
import React, { Component } from react
import {HashRouter,Route} from react-router-dom
import Film from ./views/Film
import Cinemas from ./views/Cinemas
import Center from ./views/Centerexport default class componentName extends Component {render() {return (divHashRouter Route path/films component{Film}/RouteRoute path/cinemas component{Cinemas}/RouteRoute path/Center component{Center}/Route/HashRouter /div)}
}HashRouter 会让路径带上一个/#
也可以把路由封装成一个组件抽离出去 import React, { Component } from reactimport MyRouter from ./MyRouter
// import Film from ./views/Film
// import Cinemas from ./views/Cinemas
// import Center from ./views/Centerexport default class componentName extends Component {render() {return (div{/* HashRouter 也可以把路由封装成一个组件抽离出去Route path/films component{Film}/RouteRoute path/cinemas component{Cinemas}/RouteRoute path/Center component{Center}/Route/HashRouter */}MyRouter/MyRouter/div)}
}import React, { Component } from react
import {HashRouter,Route} from react-router-dom
import Film from ./views/Film
import Cinemas from ./views/Cinemas
import Center from ./views/Centerexport default class MyRouter extends Component {render() {return (divHashRouter Route path/films component{Film}/RouteRoute path/cinemas component{Cinemas}/RouteRoute path/Center component{Center}/Route/HashRouter/div)}
}1.4 路由重定向 如果没有匹配的路径需要跳转到指定的路径 使用Redirect from to / import React, { Component } from react
import {HashRouter,Route,Redirect,Switch} from react-router-dom
import Film from ./views/Film
import Cinemas from ./views/Cinemas
import Center from ./views/Centerexport default class MyRouter extends Component {render() {return (divHashRouter Route path/films component{Film}/RouteRoute path/cinemas component{Cinemas}/RouteRoute path/Center component{Center}/Route{/* 匹配/路径的时候 模糊匹配 跳转到/films */}Redirect from/ to/films/Redirect/HashRouter/div)}
}但是这个做法存在问题当输入http://localhost:3000/#/center 会跳到center 但再次刷新又会跳到/films
改进使用Switch 匹配一次后将不再继续匹配 import React, { Component } from react
import { HashRouter, Route, Redirect, Switch } from react-router-dom
import Film from ./views/Film
import Cinemas from ./views/Cinemas
import Center from ./views/Centerexport default class MyRouter extends Component {render() {return (divHashRouterSwitchRoute path/films component{Film}/RouteRoute path/cinemas component{Cinemas}/RouteRoute path/Center component{Center}/Route{/* 匹配/路径的时候 跳转到/films */}Redirect from/ to/films/Redirect/Switch/HashRouter/div)}
}精准匹配exact
场景/ 跳转到/films 其他不匹配上述路由的跳转到404 import React, { Component } from react
import { HashRouter, Route, Redirect, Switch } from react-router-dom
import Film from ./views/Film
import Cinemas from ./views/Cinemas
import Center from ./views/Center
import NotFound from ./views/NotFoundexport default class MyRouter extends Component {render() {return (divHashRouterSwitchRoute path/films component{Film}/RouteRoute path/cinemas component{Cinemas}/RouteRoute path/Center component{Center}/Route{/* 匹配/路径的时候 跳转到/films */}Redirect from/ to/films exact/RedirectRoute component{NotFound}/Route/Switch/HashRouter/div)}
}import React, { Component } from reactexport default class NotFound extends Component {render() {return (div404 Not Found/div)}
}注意exact 精确匹配 (Redirect 即使使用了exact, 外面还要嵌套Switch 来用) 1.5 嵌套路由
MyRouter组件中的路由保持不变 当/film模糊匹配到后会进入Film组件
以下代码在Film组件中写即可
SwitchRoute path/films/nowplaying component{Nowplaying}/Route path/films/comingsoon component{Comingsoon}/Redirect from/films to/films/nowplaying/
/Switch1.6 路由跳转方式
1.声明式导航 import React, { Component } from react
import {NavLink} from react-router-domexport default class Navbar extends Component {render() {return (divliNavLink to/films电影/NavLink/liliNavLink to/cinemas影院/NavLink/liliNavLink to/center我的/NavLink/li/div)}
}意思是可以监听到地址 如果是/center会给我的这个a标签给加上classactive的属性 也可以自定义属性方便设置css高亮显示 liNavLink to/films activeClassNameNavbaractive电影/NavLink/liliNavLink to/cinemas activeClassNameNavbaractive影院/NavLink/liliNavLink to/center activeClassNameNavbaractive我的/NavLink/li 2.编程式导航
this.props.history.push(/center)或者导入useHistory
import {useHistory} from react-router-domconst history useHistory()history.push(/detail)
