Reactjs 在React Router 6中，在路由渲染后更新路由数据

发布于07月11日

在我的应用程序中，我有一个Badcrumb组件，它使用路由嵌套路径来显示面包屑.

const matches = useMatches();

function createBreadcrumbList() {
  const breadcrumb = [];
  matches.forEach((route, index) => {
    const crumb = {};
    crumb.label = BREADCRUMB_PAGE_MAP[route.id];
    if (!crumb.label) return;

    if (matches.length - index > 1) crumb.to = route.pathname;
    breadcrumb.push(crumb);
  });

  return breadcrumb;
}

这将创建此格式的面包屑，

主页&>用户&>用户信息

当前设置可以很好地处理Badcrumb(主页、用户等)中的静态值.但我需要最后一条路由的动态值.对于User Info路径，我希望显示用户的名称和计数.

主页&>用户&>丹尼斯(10)

然而，该数据在路由加载之后动态加载.

是否可以触发在路由上设置此数据并导致Matches挂钩再次运行的操作？

这是Codesandbox的链接， https://codesandbox.io/s/router-breadcrumb-h6trtk个

useEffect(() => { if (posts.length > 0) { const postsStr = posts.length > 0 ? ` (${posts.length})` : ""; navigate(location.pathname, { replace: true, state: { breadcrumb: { pageName: `${selectedUser?.name}${postsStr}` } } }); } }, [posts]);

export default function useBreadcrumb() { const matches = useMatches(); const location = useLocation(); ... ... let label = BREADCRUMB_PAGE_MAP[route.id]; if (route.pathname === location.pathname) { label = location?.state?.breadcrumb?.pageName || label; } crumb.label = label; ... ...

Reactjs 在React Router 6中，在路由渲染后更新路由数据

推荐答案

Reactjs相关问答推荐

我想将状态设置为true，直到每一张卡片都生成并在多姆中呈现

如何实现黑暗模式 map ？

React，React Router，Joy UI：如何在导航离开和返回后禁用snackbar重新出现？

在Reaction中单击并显示子组件延迟/动画

左边框不在图表中显示

在Reaction中导入'；图片&文件夹时出错

MUI：在props 主题中找到的值：；错误；是[Object]，而不是字符串或数字

如何在中间件中获取 nextAuth 会话

如何在我的 React 应用程序中仅显示我的 Register 组件

React 错误：只能用作元素的子元素，从不直接渲染.请将您的包裹在中

将 useRef 与 useImperativeHandle 一起使用时，React 不会重新渲染

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗？

如何在 React 中停止嵌套 Link 和 Button 组件的事件传播？

onChange in useEffect 的最佳实践

Cypress 组件测试不渲染react 组件(但它的内容)

RTK 查询Mutations 在 StrictMode 中执行两次

vdom 最终更新了 dom(在比较之后)任何 dom 更改实际上应该触发整个树的重绘和回流，那么 vdom 有什么用？

如何解决在 react.js 中找不到模块错误

为什么我在运行一些 npm react 命令时会收到这些警告？

NextJs - 如何从站点 map 生成器中删除重复的 URL？