家乡网站建设,品牌网站怎么建立,国网,深圳网站建设公司613REACT-路由v61. App.js2. 搭建路由2.1 普通写法2.2 使用useRoutes构建路由2.3 重定向封装2.4 嵌套路由中的组件Outlet3. 导航跳转3.2 声明式导航#xff08;NavLink标签#xff09;3.2 编程式导航跳转#xff08;useNavigate#xff09;3.2.1 获取参数3.2.1.1 useSearchPar…
REACT-路由v61. App.js2. 搭建路由2.1 普通写法2.2 使用useRoutes构建路由2.3 重定向封装2.4 嵌套路由中的组件Outlet3. 导航跳转3.2 声明式导航NavLink标签3.2 编程式导航跳转useNavigate3.2.1 获取参数3.2.1.1 useSearchParams3.2.1.1 useParams4. Login.js5. 自定义封装withRouternpm i react-router-dom1. App.js
import ./App.css;
import { HashRouter } from react-router-dom;//路由模式BrowserRouter
import IndexRouter from ./router/IndexRouter;
import Tabbar from ./components/Tabbar/Tabbar;function App() {return (div classNameApplidddd/liHashRouterIndexRouter/IndexRouterTabbar/Tabbar/HashRouter/div);
}export default App;2. 搭建路由
src/router/IndexRouter.js
2.1 普通写法
import React, { lazy, Suspense } from react
import {Routes,Route,Navigate} from react-router-dom
import Redirect from ../components/Redirectexport default function IndexRouter() {return (Routes{/* index等同于他的父级地址这里等同于http://localhost:3000/ */}{/* Route index element{Films/} / */}Route path/films element{LazyLoad(Films)}Route index element{Navigate to/films/nowPlaying /} /{/* 嵌套路由需要在组件Films中配套Outlet出口一起使用 */}Route pathnowPlaying element{LazyLoad(films/NowPlaying)} /Route path/films/commingSoon element{LazyLoad(films/CommingSoon)} //RouteRoute path/cinemas element{LazyLoad(Cinemas)} /Route path/login element{LazyLoad(Login)} /Route path/center element{AuthCom{LazyLoad(Center)}/AuthCom} /{/* Route path/detail element{LazyLoad(DetailsSearch)} / */}Route path/detail/:id/:type element{LazyLoad(DetailsParams)} /{/* 重定向-Navigate星号可以匹配任意地址*/}{/* Route path/ element{Navigate to/films /}/ */}Route path/ element{Redirect to/films /}/Route path* element{LazyLoad(NotFound)}//Routes)
}//路由拦截
function AuthCom({children}){//props.childrenconst isLogin window.localStorage.getItem(token);return isLogin?children:Redirect to/login/
}//路由懒加载,重定向的不用再调用懒加载函数
const LazyLoad path {const Comp lazy(()import(../views/path));return (Suspense fallback{加载中。。。/}Comp//Suspense)
}
2.2 使用useRoutes构建路由
import React, { lazy, Suspense } from react
import {Routes,Route,Navigate, useRoutes} from react-router-dom
import Redirect from ../components/Redirectexport default function IndexRouter() {const element useRoutes([{path:/films,element:LazyLoad(Films),children:[{path:,element:Navigate to/films/nowPlaying /},{path:nowPlaying,element:LazyLoad(films/NowPlaying)},{path:/films/commingSoon,element:LazyLoad(films/CommingSoon)},]},{path:/cinemas,element:LazyLoad(Cinemas)},{path:/login,element:LazyLoad(Login)},{path:/center,element:AuthCom{LazyLoad(Center)}/AuthCom},{path:/detail/:id/:type,element:LazyLoad(DetailsParams)},{path:/,element:Redirect to/films /},{path:*,element:LazyLoad(NotFound)},]);return (element)
}//路由拦截
function AuthCom({children}){//props.childrenconst isLogin window.localStorage.getItem(token);return isLogin?children:Redirect to/login/
}//路由懒加载,重定向的不用再调用懒加载函数
const LazyLoad path {const Comp lazy(()import(../views/path));return (Suspense fallback{加载中。。。/}Comp//Suspense)
}2.3 重定向封装
src/components/Redirect.js
import React, { useEffect } from react
import {useNavigate} from react-router-domexport default function Redirect({to}) {const Navigate useNavigate();useEffect((){Navigate(to,{replace:true});},[]);return null;
};2.4 嵌套路由中的组件Outlet
src/views/Films.js
import React from react
import {Outlet} from react-router-dom
export default function Films() {return (divdiv style{{height:200px,background:pink}}轮播/div{/* 这里会呈现 NowPlaying或commingSoon的内容 */}Outlet/Outlet/div)
}3. 导航跳转
3.2 声明式导航NavLink标签
src/components/Tabbar/Tabbar.js
import style from ./Tabbar.module.css
import React from react
import {NavLink} from react-router-domexport default function Tabbar() {return (divulli{/* Link没有高亮className*/}{/* Link to/films影院/Link */}NavLink to/films className{({isActive})isActive?style.tabActive:}电影/NavLink/liliNavLink to/cinemas className{({isActive})isActive?style.tabActive:}影院/NavLink/liliNavLink to/center className{({isActive})isActive?style.tabActive:}我的/NavLink/li/ul/div)
}src/components/Tabbar/Tabbar.module.css
.tabActive{color: pink;
}/* 会影响全局最好加自定义className */
li{list-style: none;
}3.2 编程式导航跳转useNavigate
src/views/films/NowPlaying.js
import React,{useState,useEffect} from react
import axiosfrom axios;
import { useNavigate } from react-router-dom;
import FilmItem from ../../components/FilmItem;export default function NowPlaying() {const [list,setList] useState([]);useEffect((){//异步获取数据axios({url:https://m.maizuo.com/gateway?cityId110100pageNum1pageSize10type1k9261499,method:get,headers:{X-Client-Info: {a:3000,ch:1002,v:5.2.1,e:16745641013679850669801473,bc:110100},X-Host: mall.film-ticket.film.list}}).then(res{setList(res.data.data.films)})},[])// const navigate useNavigate();// const handleChangePage id {// //query-url传参 // // navigate(/detail?id${id}type2)// //路由传参// navigate(/detail/${id}/type2)// }return (div{list.map(item{return (// div key{item.filmId} onClick{() handleChangePage(item.filmId)}{item.name}/divFilmItem key{item.filmId} {...item} /)})}/div)
}3.2.1 获取参数
3.2.1.1 useSearchParams
src/views/Details-searchParams.js
navigate(/detail?id${id}type2)import React from react
import { useSearchParams } from react-router-domexport default function Details() {const [searchParmas,setSearchParmas] useSearchParams();console.log(searchParmas.get(id))//获取参数console.log(searchParmas.has(name))//判断是否有参数return (divDetailsbutton onClick{(){// 不能单独修改单个parmassetSearchParmas({id:1000,type:1})//修改参数}}猜你喜欢/button/div)
}3.2.1.1 useParams
src/views/Details-params.js
import React from react
import { useNavigate, useParams } from react-router-domexport default function Details() {const params useParams();const navigate useNavigate();console.log(params.id)//获取参数return (divDetailsbutton onClick{(){navigate(/detail/1000/3)}}猜你喜欢/button/div)
}
4. Login.js
import React from react
import { useNavigate } from react-router-dom;export default function Login() {const navigate useNavigate();return (divh1登录页面/h1input typetext /button onClick{(){localStorage.setItem(token,xxx);navigate(/center)}}登录/button/div)
}5. 自定义封装withRouter
import React from react
import { useLocation, useNavigate, useParams } from react-router-domexport default function withRouter(Component) {return function(props){const navigate useNavigate();const params useParams();const location useLocation();return Component {...props} history{{navigate,params,location}}/}
}import React from react
import withRouter from ./withRouterfunction FilmItem(props) {const handleChangePage id {props.history.navigate(/detail/${id}/type2)//跳转页面console.log(props.history.params)//获取参数对象console.log(props.history.location)//获取当前路由}return (divli onClick{() handleChangePage(props.filmId)}{props.name}/li/div)}export default withRouter(FilmItem)
