React应用中如何将路由页面的工具栏内容传递给兄弟Toolbar组件

你可以根据项目规模选择下面三种方案：

方案1：状态提升至公共父组件（小项目首选，实现最简单） #

把工具栏按钮的状态存到所有相关组件的公共父级App组件中，给子页面传递修改状态的方法，子页面挂载/状态更新时修改工具栏状态，再通过props把状态传递给Toolbar渲染即可。

调整后代码示例 #

// App.jsx 修改
import { useState } from 'react'
function App(props) {
  // 存储工具栏要渲染的按钮元素
  const [toolbarNextButton, setToolbarNextButton] = useState(null)
  return (
    <div className="page">
      <Switch>
        <Route exact path="/">
          <Homepage setToolbarButton={setToolbarNextButton} />
        </Route>
        <Route exact path="/login">
          <Login setToolbarButton={setToolbarNextButton} />
        </Route>
      </Switch>
      <Toolbar nextButton={toolbarNextButton} />
    </div>
  )
}

// Homepage.jsx 修改
import { useEffect } from 'react'
function Homepage(props) {
  const nextButton = <a href="/login">前往登录页</a>
  useEffect(() => {
    // 组件挂载时设置工具栏按钮
    props.setToolbarButton(nextButton)
    // 组件卸载时清空按钮，避免跨页残留
    return () => props.setToolbarButton(null)
  }, [])
  return <h1>欢迎</h1>
}

// Login.jsx 修改
import { useState, useEffect } from 'react'
function Login(props) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const nextButton = <button onClick={()=> login(email, password)}>登录</button>

  useEffect(() => {
    props.setToolbarButton(nextButton)
    return () => props.setToolbarButton(null)
    // 依赖添加表单状态，保证按钮点击时能拿到最新输入值
  }, [email, password])

  return (
    <>
      <input type="email" onChange={e => setEmail(e.target.value)} />
      <input type="password" onChange={e => setPassword(e.target.value)} />
    </>
  )
}

// Toolbar.jsx 修改
function Toolbar(props) {
  // 注意：nextButton是变量不是自定义组件，不需要用尖括号包裹
  return <>{props.nextButton}</>
}

方案2：用React Context实现（中大型项目首选，避免props透传） #

如果项目层级深，跨多层组件传props太麻烦，可以创建全局的工具栏上下文，所有子组件直接调用上下文方法修改工具栏内容，不需要逐层传递props。

核心实现逻辑 #

1. 创建ToolbarContext，封装状态和修改方法
2. 用Provider包裹整个应用，全局共享上下文
3. 子页面直接调用useToolbar自定义hook设置按钮，App直接从上下文取按钮内容传给Toolbar即可

方案3：路由元信息配置（按钮和路由强绑定时适用） #

如果用的是React Router v6及以上版本，可以直接在路由配置里添加meta字段，把对应页面的工具栏按钮配置写在路由上，App里获取当前激活路由的meta信息传给Toolbar渲染，不需要每个页面单独写设置逻辑。

另外注意你原有代码的错误：nextButton是组件内部定义的React元素变量，不是自定义组件，不能写成<nextButton />，直接渲染变量即可，否则会触发渲染错误。

内容的提问来源于stack exchange，提问作者henryaaron