I'm using Navbar as the root file and I have 3 pages(profile, About, and Home), I want to get data from pages to the root file, e.g. (title = "Profile"), because I want to display the title in the navbar.

my navbar page is listed below

import React from "react";

function app(){
return(
<div className="topnav">
          <a
            style={{
              fontWeight: "bold",
              fontSize: "20px",
              position: "absolute",
              margin: "10px",
              color: "#001b2b",
            }}
          >
            {title}
          </a>
<Link exact to="/profile">profile</Link>
<Link exact to="/home">Home</Link>
<Link exact to="/about">About</Link>

</div>
)}

if I click profile I want to set the title="profile"

I stuck to get data from child component

推荐答案

Since its just a title, rather than sending values from child to parent, you can just set a session variable PageTitle when you are clicking on any of the menu on navigation bar and refresh the state. If you are in Profile page the set session variable as below

import { ReactSession }  from 'react-client-session';
ReactSession.set("PageTitle", "Profile");

and in your root file you can get this session variable as below,

this.title = ReactSession.get("PageTitle");  // This will Return "Profile"

Reactjs相关问答推荐

避风港访问端口以包含Reaction应用程序

如何使Reaction Select 选项菜单从选项数组的特定索引开始

导致useState中断的中断模式

为什么我的react虚拟化列表不显示滚动条,除非我确保高度低于rowCount*rowHeight?

需要特定的数学函数来标准化动画持续时间

Reaction路由DOM v6不包含上下文(Supabase)

点击页脚链接时,如何更改ReactJS导航栏中的活动菜单项(样式为Tailwind CSS)?

为什么我的react 简单计时器项目不起作用?

我可以同时使用 Gatsby 和 NEXT.JS 吗?

Spring Boot + React + MySQL应用的架构层面有哪些?

无法设置 null 的属性(设置src)

Firebase Storage: 对象不存在图片上传路径错误

使用 map 循环浏览列表列表中的列表并显示它们

如何在 React Native 中更新跨屏幕呈现的上下文状态变量?

调用 Statsig.updateUser 时 UI 不呈现

为什么此代码中的 useState 不更新(文本更新但 id 不更新)?

为什么重新渲染不会影响 setTimeout 的计数?

如何用实际的br标签替换axios响应中的br标签?

Rtk 查询无效标签不使数据无效

Antd Carousel 从类组件转为函数式