reactPC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts资源-CSDN文库
react PC端项目构建，react@18.2.0+antd+vite+axios+redux+sass完全版代码下载：
reactPC端项目构建，react@18.2.0+antd+vite+axios+redux+sass资源-CSDN文库
react移动端项目构建TS，react@18.2.0+react-vant+vite+axios+redux+sass+ts完全版代码下载：
react移动端项目构建TS，react@18.2.0+react-vant+vite+axios+redux+sass+ts资源-CSDN文库
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass完全版代码下载：
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass资源-CSDN文库
一、react-router简介
react-router 是一个用于处理 React 运用程序中路由管理的库，它供应了一种大略而强大的办法来实现单页面运用程序（SPA）中的路由掌握。通过
react-router，可以轻松地定义运用程序的不同路由，利用户能够在运用程序中浏览不同的页面或视图。
二、路由器组件
<BrowserRouter>：适用于支持 HTML5 history API 的环境，如 Web 浏览器basename：用于为所有位置设置基准 URL。常日用于运用程序支配在子目录的情形下children：用于渲染 BrowserRouter 组件的子组件。常日用于包裹运用程序的其他组件futurere：预加载和延迟加载的配置信息。window：用于指定在哪个全局工具上实行路由操作，常日用于在做事端渲染时指定全局工具<HashRouter>：适用于不支持 HTML5 history API 的环境，会在 URL 中利用哈希值来仿照路由。basename：用于为所有位置设置基准 URL。常日用于运用程序支配在子目录的情形下children：用于渲染HashRouter组件的子组件。常日用于包裹运用程序的其他组件futurere：预加载和延迟加载的配置信息。window：用于指定在哪个全局工具上实行路由操作，常日用于在做事端渲染时指定全局工具<Router>：基本路由器组件，常作为其他路由器组件的根本，根据须要进行定制化配置basename：用于为所有位置设置基准 URL。常日用于运用程序支配在子目录的情形下children：children 属性用于渲染Router组件的子组件。常日用于包裹运用程序的其他组件location：当前的路由位置navigationType:用于指定导航类型，可能的取值包括 POP, PUSH 和 REPLACE，用于指示路由的导航办法。navigator:用于指定导航器，卖力处理路由的导航操作。static:用于指示是否为静态路由，静态路由常日用于做事器端渲染（SSR）等场景。<MemoryRouter>：MemoryRouter 不会操作浏览器的 URL，而是将路由信息存储在内存中，适用于非浏览器环境，如测试、做事器渲染等。basename：用于为所有位置设置基准 URL。常日用于运用程序支配在子目录的情形下children：用于渲染MemoryRouter组件的子组件。常日用于包裹运用程序的其他组件initialEntries：初始路由条款标数组initialIndex：表示在 initialEntries 数组中哪个索引对应的路由该当作为初始路由future：预加载和延迟加载的配置信息。<StaticRouter>：用于做事器端渲染（SSR），在做事器端渲染 React 运用程序时利用。basename：用于为所有位置设置基准 URL。常日用于运用程序支配在子目录的情形下children：用于渲染StaticRouter组件的子组件。常日用于包裹运用程序的其他组件location：当前的路由位置三、路由匹配器组件
<Routes>：定义运用程序的路由配置的顶级路由组件children：children 属性用于渲染Routes组件的子组件。常日用于包裹运用程序的其他组件location：当前的路由位置<Route>组件用于在运用程序中定义路由规则，以指定当用户访问特定路径时要渲染的组件。path：表示路由的路径。当 URL 与 path 匹配时，干系的路由规则将被触发。index：指示是否这是一个索引路由。如果设置为 true，则表示这是一个索引路由，常日用于指示默认的子路由。children：表示当前路由的子元素，常日是其他组件或路由干系内容。caseSensitive：指示路由匹配是否区分大小写。id：路由的唯一标识符。loader：用于在须要时加载组件或数据。action：用于实行路由干系的操作。element：表示当前路由的渲染元素。hydrateFallbackElement：表示在做事器端渲染时的回退元素。errorElement：表示在路由发生缺点时的元素。Component：表示当前路由对应的 React 组件。HydrateFallback：表示在做事器端渲染时的回退组件。ErrorBoundary：表示用于处理路由缺点的缺点边界组件。handle：表示路由的处理函数。shouldRevalidate：用于确定是否该当重新验证路由。lazy：用于<Await>：异步组件children：用于根据 Promise 解析结果呈现不同的内容。errorElement：React 节点，用于指定在 Promise 谢绝时呈现的内容。resolve：表示须要等待解析的 Promise 工具或数据。<Link>：通过单击或点击该页面导航到另一个页面to：表示链接的目标位置，可以是一个字符串或者包含 pathname、search 和 hash 属性的工具，用于构建目标URL。preventScrollReset：指定是否阻挡链接点击后的滚动位置重置。relative：导航相对位置的办法，可以是 "route" 或 "path"。reloadDocument：指定是否在点击链接后重新加载文档。replace：指定是否利用更换导航。state：要通报的状态数据。unstable_viewTransition：指定是否利用不稳定的视图过渡。<NavLink>：分外类型的<Link>，它知道自己是“活动”、“挂起”还是“正在转换”，除了<Link>中有的属性，还包括以下属性className：普通的className类似，只不过过可以通报函数，根据状态定制className，如：({ isActive, isPending, isTransitioning })=>{}style：普通的style类似，只不过过可以通报函数，根据状态定制className，如：({ isActive, isPending, isTransitioning })=>{}children：普通的style类似，只不过过可以通报函数，根据状态定制className，如：({ isActive, isPending, isTransitioning })=>{}end：用于改变激活和挂起状态的匹配逻辑，只匹配到 <NavLink>的 to 路径的“末端”caseSensitive：指示路由匹配是否区分大小写。<Navigate>：以编程办法触发页面导航，而不是依赖于用户的点击或其他交互操作。to：表示导航目标的位置。这可以是一个字符串或一个工具，详细取决于您要导航到的位置。replace (可选)：一个布尔值，表示是否用导航更换当前历史记录中的条款，而不是添加新的历史记录条款。state (可选)：用于在导航之间通报状态的工具。relative (可选)：表示相对路由的类型，可能是 boolean 或 number。<Outlet>：在父路由元素中利用 <Outlet> 来呈现其子路由元素context：用于通报高下文信息给Outlet组件。五、路由Hook
useHref：用于天生给定路由路径的 HREF 属性值import {useHref} from "react-router-dom";const Home = () => { const href = useHref('/list'); return (<a href={href}>Go to Destination</a>);};export default Home;useLocation：用于获取当前页面的位置信息，可以访问当前页面的路径、搜索参数和哈希值等信息
import {useLocation} from "react-router-dom";const Home = () => { console.log(useLocation()) return (<>home页</>);};export default Home;useNavigate：编程式路由导航，无需利用<Link>组件或history工具
import {useNavigate} from "react-router-dom";const Home = () => { const navigate = useNavigate(); const goRouter = () => { navigate('/list', { replace: true,//是否更换导航 state: {}, //页面间通报数据，history.state preventScrollReset: false, //一个布尔值，用于指示是否阻挡在页面导航时重置滚动位置，需利用数据路由器合营ScrollRestoration组件利用 relative: "parent", //指定相对导航的办法。可以是"parent", "child", 或者"sibling"，用于相对付当前路由的父级、子级或同级进行导航。 unstable_flushSync: false, //用于指示是否在导航时同步刷新。如果设置为true，则会在导航时同步刷新，而不是延迟到下一个渲染周期。 unstable_viewTransition: false, //用于指示是否在导航时利用视图过渡。如果设置为true，则会在导航时利用视图过渡效果 }) } return (<> <button onClick={() => navigate('/list')}>页面跳转1</button> <button onClick={goRouter}>页面跳转2</button> <button onClick={() => navigate(-1)}>返回</button> </>);};export default Home;useRoutes：等同于<Routes>组件，用来定义路由，工具具有与普通 <Route> 元素相同的属性
import {Navigate, useRoutes} from "react-router-dom";import Home from "@pages/home/home.jsx";/ id: 'id',//路由的唯一标识符。 path: '/', //路由的路径。 element: <></>, //React 元素，用于渲染路由内容。。 children: [{}], //子路由 index: false,//指示这是一个索引路由，索引路由是指当用户访问运用程序的根路径时所匹配的路由，常用于子路由 /const routes = [{ path: '/', element: <Navigate to="/home" replace/>,}, { path: '/home', element: <Home/>,}, { path: '/home1', children:[{ index: true, element: <h1>home1页</h1>, }]}];const RootRouter = () => useRoutes(routes);export default RootRouter;useParams：获取当前URL 匹配的动态参数，须要在路由中配置参数
import {Navigate, useRoutes} from "react-router-dom";import Home from "@pages/home/home.jsx";import List from "@pages/list/list.jsx";const routes = [{ path: '/', element: <Navigate to="/home" replace/>,}, { path: '/home', element: <Home/>,}, { path: '/list/:id', element: <List/>}];const RootRouter = () => useRoutes(routes);export default RootRouter;
import {useNavigate} from "react-router-dom";const Home = () => { const navigate = useNavigate(); const goRouter = ()=>{ navigate('/list/1') } return (<> <button onClick={goRouter}>跳转list</button> </>);};export default Home;
import {useParams} from "react-router-dom";const List = () => { console.log(useParams()) return (<>列表页</>);};export default List;useOutlet、useOutletContext：useOutlet创建Outlet、useOutletContext获取Outlet高下文。
import {Navigate, useRoutes} from "react-router-dom";import Home from "@pages/home/home.jsx";import List from "@pages/list/list.jsx";const routes = [{ path: '/', element: <Navigate to="/home" replace/>,}, { path: '/home', element: <Home/>, children: [{ path: 'list', element: <List/> }]}];const RootRouter = () => useRoutes(routes);export default RootRouter;
import {Outlet, useOutlet} from "react-router-dom";const Home = () => { const UseOutlet = useOutlet({parent:'home'}); return (<> <div>Home页</div> {/<Outlet context={{parent:'home'}} />/} {UseOutlet} </>);};export default Home;
import {useOutletContext} from "react-router-dom";const List = () => { console.log(useOutletContext()) return (<>列表页</>);};export default List;useSearchParams：处理URL查询参数
import {useNavigate} from "react-router-dom";const Home = () => { const navigate = useNavigate(); const goRouter = ()=>{ navigate('/list?name="张三"&id=9999&name="李四"') } return (<> <button onClick={goRouter}>跳转list</button> </>);};export default Home;
import {useParams, useSearchParams} from "react-router-dom";const List = () => { let [searchParams, setSearchParams] = useSearchParams(); console.log(searchParams.get('name')); //只获取第一个name查询参数 // console.log(searchParams.sort()) 查询参数排序 // console.log(searchParams.toString()) 查询参数转字符串 // console.log(searchParams.getAll('name')) 获取所有name查询参数 // searchParams.forEach((value, key, parent)=>{}) 循环查询参数 // console.log(searchParams.has('name')) 查询参数是哦福存在 // console.log(searchParams.set('name','李四')) 设置查询参数 // console.log(searchParams.append('id','9999')) 增加查询参数 // console.log(searchParams.delete('name','李四')) 删除查询参数 // setSearchParams({name:'李四',id:'哈哈哈'}) 设置查询参数 return (<>列表页</>);};export default List;useMatch：用于匹配的 Hook。
import {useMatch, useMatches} from "react-router-dom";const List = () => { const match = useMatch('/list'); return (<>列表页</>);};export default List;useBeforeUnload：用于处理页面即将卸载时的操作的 Hook，等同于window.onbeforeunload
import {useBeforeUnload} from "react-router-dom";const Home = () => { useBeforeUnload(()=>{ localStorage.setItem('pageId','list') }) return (<> <button>跳转list</button> </>);};export default Home;useLinkClickHandler：自定义 <Link>导航的click事宜
import { useHref, useLinkClickHandler,} from "react-router-dom";const StyledLink = styled("a", { color: "fuchsia" });const Link = React.forwardRef( ({onClick, replace = false, state, target, to, ...rest}, ref ) => { let href = useHref(to); let handleClick = useLinkClickHandler(to, { replace, state, target, }); return ( <StyledLink {...rest} href={href} onClick={(event) => { onClick?.(event); if (!event.defaultPrevented) { handleClick(event); } }} ref={ref} target={target} /> ); });useLinkPressHandler：自定义 <Link> 导航的press事宜
import { TouchableHighlight } from "react-native";import { useLinkPressHandler } from "react-router-native";function Link({ onPress, replace = false, state, to, ...rest}) { let handlePress = useLinkPressHandler(to, { replace, state, }); return ( <TouchableHighlight {...rest} onPress={(event) => { onPress?.(event); if (!event.defaultPrevented) { handlePress(event); } }} /> );}useNavigationType：返回当前导航类型或用户如何访问当前页面，弹出、推送或更换
import {useNavigationType} from "react-router-dom";const List = () => { console.log(useNavigationType()) return (<>列表页</>);};export default List;useResolvedPath：根据当前位置的路径名解析 pathname 给定 to 值中的位置
import {useResolvedPath} from "react-router-dom";const List = () => { console.log(useResolvedPath('/list')) return (<>列表页</>);};export default List;useAsyncError：用于处理异步缺点的 Hook，需搭配组件<Await>利用
import {Await, useAsyncError} from "react-router-dom";import {Suspense} from "react";function ErrorElement() { const error = useAsyncError(); return ( <p>页面出错了：{error.message}</p> );}const Home = () => { const asyncLoadData =()=>{ return new Promise((resolve, reject) => { // 异步操作，比如要求数据 setTimeout(() => { reject({message:'异步要求失落败'}) }, 2000) }); } return (<> <div>home页</div> <Suspense fallback={<div>加载中.....</div>}> <Await resolve={asyncLoadData()} errorElement={<ErrorElement />}> <div>加载成功</div> </Await> </Suspense> </>);};export default Home;useAsyncValue：用于处理异步值的 Hook，，需搭配组件<Await>利用
import {Await, useAsyncError, useAsyncValue} from "react-router-dom";import {Suspense} from "react";function SuccessElement(){ const result = useAsyncValue(); return ( <p>页面要求成功：{result.message}</p> );}function ErrorElement() { const error = useAsyncError(); return ( <p>页面出错了：{error.message}</p> );}const Home = () => { const asyncLoadData =()=>{ return new Promise((resolve, reject) => { // 异步操作，比如要求数据 setTimeout(() => { resolve({message:'要求成功'}) }, 2000) }); } return (<> <div>home页</div> <Suspense fallback={<div>加载中.....</div>}> <Await resolve={asyncLoadData()} errorElement={<ErrorElement/>}> <SuccessElement/> </Await> </Suspense> </>);};export default Home;useInRouterContext：判断组件是否在<Router>的高下文中呈现
六、常用方法
json(data, init)：new Response()的简化，json({ some: "thing" }, { status: 200 })generatePath(originalPath,params)：快速天生路由路径，一样平常用于动态参数的路由，generatePath('/users/:id', { id: '42' })isRouteErrorResponse(error)：判断是否是缺点路由相应，useAsyncError()resolvePath(to, fromPathname)：将给定 To 值解析为具有绝对 pathname 值的实际 Path 工具，如果想知道To的确切路径可以利用该方法，resolvePath('/home')matchPath(pattern,pathname)：类似useMatch，返回匹配到的route path。matchRoutes(routes,locationArg,basename)：返回匹配到的route 工具。renderMatches(matches)：将matchRoutes匹配到的router工具渲染成react元素。createSearchParams({params)：创建路由的搜索参数，返回URLSearchParams工具，等同于new URLSearchParamsconst url = new URL("https://example.com?foo=1&bar=2");const params1 = createSearchParams(url.search);const params3 = new URLSearchParams(url.search);const params2 = url.searchParams;console.log(params2.get('foo'),params1.get('foo'),params3.get('foo'))createRoutesFromElements(reactNode)：将路由<Route>创创建的路由转成工具
import {createRoutesFromElements, Navigate, Route, useRoutes} from "react-router-dom";import Home from "@pages/home/home.jsx";import List from "@pages/list/list.jsx";const routes = createRoutesFromElements(<> <Route path="/" element={<Navigate to="/home" replace/>}></Route> <Route path="/home" element={<Home/>}></Route> <Route path="/list" element={<List/>}></Route></>)// const routes = [{// path: '/',// element: <Navigate to="/home" replace/>,// }, {// path: '/home',// element: <Home/>,// }, {// path: '/list',// element: <List/>,// }];const RootRouter = () => useRoutes(routes);export default RootRouter;
