react-router6常规路由器、hook详解

最新推荐文章于 2024-04-21 21:26:48 发布

局外人LZ

最新推荐文章于 2024-04-21 21:26:48 发布

阅读量1k

点赞数 30

分类专栏： react 前端文章标签： react.js 前端前端框架 react路由

本文链接：https://blog.csdn.net/randy521520/article/details/136782806

版权

前端同时被 2 个专栏收录

47 篇文章 3 订阅

订阅专栏

react

9 篇文章 0 订阅

订阅专栏

react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts 完整版代码下载：
https://download.csdn.net/download/randy521520/88922625
react PC端项目构建，react@18.2.0+antd+vite+axios+redux+sass完整版代码下载：
https://download.csdn.net/download/randy521520/88922569
react移动端项目构建TS，react@18.2.0+react-vant+vite+axios+redux+sass+ts完整版代码下载：
https://download.csdn.net/download/randy521520/88917557
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass完整版代码下载：
https://download.csdn.net/download/randy521520/88917543

一、react-router简介

react-router 是一个用于处理 React 应用程序中路由管理的库，它提供了一种简单而强大的方式来实现单页面应用程序（SPA）中的路由控制。通过
react-router，可以轻松地定义应用程序的不同路由，使用户能够在应用程序中浏览不同的页面或视图。

二、路由器组件

1.<BrowserRouter>：适用于支持 HTML5 history API 的环境，如 Web 浏览器

basename：用于为所有位置设置基准 URL。通常用于应用程序部署在子目录的情况下
children：用于渲染 BrowserRouter 组件的子组件。通常用于包裹应用程序的其他组件
futurere：预加载和延迟加载的配置信息。
window：用于指定在哪个全局对象上执行路由操作，通常用于在服务端渲染时指定全局对象
2.<HashRouter>：适用于不支持 HTML5 history API 的环境，会在 URL 中使用哈希值来模拟路由。
basename：用于为所有位置设置基准 URL。通常用于应用程序部署在子目录的情况下
children：用于渲染HashRouter组件的子组件。通常用于包裹应用程序的其他组件
futurere：预加载和延迟加载的配置信息。
window：用于指定在哪个全局对象上执行路由操作，通常用于在服务端渲染时指定全局对象
3.<Router>：基本路由器组件，常作为其他路由器组件的基础，根据需要进行定制化配置
basename：用于为所有位置设置基准 URL。通常用于应用程序部署在子目录的情况下
children：children 属性用于渲染Router组件的子组件。通常用于包裹应用程序的其他组件
location：当前的路由位置
navigationType:用于指定导航类型，可能的取值包括 POP, PUSH 和 REPLACE，用于指示路由的导航方式。
navigator:用于指定导航器，负责处理路由的导航操作。
static:用于指示是否为静态路由，静态路由通常用于服务器端渲染（SSR）等场景。
4.<MemoryRouter>：MemoryRouter 不会操作浏览器的 URL，而是将路由信息存储在内存中，适用于非浏览器环境，如测试、服务器渲染等。
basename：用于为所有位置设置基准 URL。通常用于应用程序部署在子目录的情况下
children：用于渲染MemoryRouter组件的子组件。通常用于包裹应用程序的其他组件
initialEntries：初始路由条目的数组
initialIndex：表示在 initialEntries 数组中哪个索引对应的路由应该作为初始路由
future：预加载和延迟加载的配置信息。
5.<StaticRouter>：用于服务器端渲染（SSR），在服务器端渲染 React 应用程序时使用。
basename：用于为所有位置设置基准 URL。通常用于应用程序部署在子目录的情况下
children：用于渲染StaticRouter组件的子组件。通常用于包裹应用程序的其他组件
location：当前的路由位置

三、路由匹配器组件

1.<Routes>：定义应用程序的路由配置的顶级路由组件

children：children 属性用于渲染Routes组件的子组件。通常用于包裹应用程序的其他组件
location：当前的路由位置
2.<Route> 组件用于在应用程序中定义路由规则，以指定当用户访问特定路径时要渲染的组件。
path：表示路由的路径。当 URL 与 path 匹配时，相关的路由规则将被触发。
index：指示是否这是一个索引路由。如果设置为 true，则表示这是一个索引路由，通常用于指示默认的子路由。
children：表示当前路由的子元素，通常是其他组件或路由相关内容。
caseSensitive：指示路由匹配是否区分大小写。
id：路由的唯一标识符。
loader：用于在需要时加载组件或数据。
action：用于执行路由相关的操作。
element：表示当前路由的渲染元素。
hydrateFallbackElement：表示在服务器端渲染时的回退元素。
errorElement：表示在路由发生错误时的元素。
Component：表示当前路由对应的 React 组件。
HydrateFallback：表示在服务器端渲染时的回退组件。
ErrorBoundary：表示用于处理路由错误的错误边界组件。
handle：表示路由的处理函数。
shouldRevalidate：用于确定是否应该重新验证路由。
3.lazy：用于懒加载路由。

四、其他组件

1.<Await>：异步组件

children：用于根据 Promise 解析结果呈现不同的内容。
errorElement：React 节点，用于指定在 Promise 拒绝时呈现的内容。
resolve：表示需要等待解析的 Promise 对象或数据。
2.<Link>：通过单击或点击该页面导航到另一个页面
to：表示链接的目标位置，可以是一个字符串或者包含 pathname、search 和 hash 属性的对象，用于构建目标URL。
preventScrollReset：指定是否阻止链接点击后的滚动位置重置。
relative：导航相对位置的方式，可以是 “route” 或 “path”。
reloadDocument：指定是否在点击链接后重新加载文档。
replace：指定是否使用替换导航。
state：要传递的状态数据。
unstable_viewTransition：指定是否使用不稳定的视图过渡。
3.<NavLink>：特殊类型的，它知道自己是“活动”、“挂起”还是“正在转换”，除了中有的属性，还包括以下属性
className：普通的className类似，只不过过可以传递函数，根据状态定制className，如：({ isActive, isPending, isTransitioning })=>{}
style：普通的style类似，只不过过可以传递函数，根据状态定制className，如：({ isActive, isPending, isTransitioning })=>{}
children：普通的style类似，只不过过可以传递函数，根据状态定制className，如：({ isActive, isPending, isTransitioning })=>{}
end：用于改变激活和挂起状态的匹配逻辑，只匹配到的 to 路径的“末尾”
caseSensitive：指示路由匹配是否区分大小写。
4.<Navigate>：以编程方式触发页面导航，而不是依赖于用户的点击或其他交互操作。
to：表示导航目标的位置。这可以是一个字符串或一个对象，具体取决于您要导航到的位置。
replace (可选)：一个布尔值，表示是否用导航替换当前历史记录中的条目，而不是添加新的历史记录条目。
state (可选)：用于在导航之间传递状态的对象。
relative (可选)：表示相对路由的类型，可能是 boolean 或 number。
5.<Outlet>：在父路由元素中使用来呈现其子路由元素
context：用于传递上下文信息给Outlet组件。

五、路由Hook

1.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;

2.useLocation：用于获取当前页面的位置信息，可以访问当前页面的路径、搜索参数和哈希值等信息

import {useLocation} from "react-router-dom";

const Home = () => {
    console.log(useLocation())

    return (<>home页</>);
};

export default Home;

3.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;

4.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;

5.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;

6.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;

7.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;

8.useMatch：用于匹配的 Hook。

import {useMatch, useMatches} from "react-router-dom";

const List = () => {
    const match = useMatch('/list');
    return (<>列表页</>);
};

export default List;

9.useBeforeUnload：用于处理页面即将卸载时的操作的 Hook，等同于window.onbeforeunload

import {useBeforeUnload} from "react-router-dom";

const Home = () => {
    useBeforeUnload(()=>{
        localStorage.setItem('pageId','list')
    })
    return (<>
        <button>跳转list</button>
    </>);
};

export default Home;

10.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}
      />
    );
  }
);

11.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);
        }
      }}
    />
  );
}

12.useNavigationType：返回当前导航类型或用户如何访问当前页面，弹出、推送或替换

import {useNavigationType} from "react-router-dom";

const List = () => {
    console.log(useNavigationType())
    return (<>列表页</>);
};

export default List;

13.useResolvedPath：根据当前位置的路径名解析 pathname 给定 to 值中的位置

import {useResolvedPath} from "react-router-dom";

const List = () => {
    console.log(useResolvedPath('/list'))
    return (<>列表页</>);
};

export default List;

14.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;

15.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;

16.useInRouterContext：判断组件是否在<Router>的上下文中呈现

六、常用方法

1.json(data, init)：new Response()的简化，json({ some: “thing” }, { status: 200 })
2.generatePath(originalPath,params)：快速生成路由路径，一般用于动态参数的路由，generatePath(‘/users/:id’, { id: ‘42’ })
3.isRouteErrorResponse(error)：判断是否是错误路由响应，useAsyncError()
4.resolvePath(to, fromPathname)：将给定 To 值解析为具有绝对 pathname 值的实际 Path 对象，如果想知道To的确切路径可以使用该方法，resolvePath(‘/home’)
5.matchPath(pattern,pathname)：类似useMatch，返回匹配到的route path。
6.matchRoutes(routes,locationArg,basename)：返回匹配到的route 对象。
7.renderMatches(matches)：将matchRoutes匹配到的router对象渲染成react元素。
8.createSearchParams({params)：创建路由的搜索参数，返回URLSearchParams对象，等同于new URLSearchParams

const 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'))

9.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;

局外人LZ

关注

30
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
react-router6常规路由器、hook详解

react-router 是一个用于处理 React 应用程序中路由管理的库，它提供了一种简单而强大的方式来实现单页面应用程序（SPA）中的路由控制。通过react-router，可以轻松地定义应用程序的不同路由，使用户能够在应用程序中浏览不同的页面或视图。
复制链接

扫一扫