React.JS如何将路由页面的pageTitle props传递给NavBar组件展示

你遇到的核心问题是<PageHeader>组件渲染在路由匹配的<Switch>外部，无法直接获取到各个页面组件内部的pageTitle属性，这里提供两种适配react-router-dom v5版本的实现方案：

方案一：状态提升同步标题 #

通过App组件的公共状态存储当前页面标题，每个页面加载时主动更新该状态：

1. 在App组件中定义标题状态，传递给PageHeader和所有页面组件

import { useState } from 'react'
import {BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Banany from "./Banany";
import Broskve from "./Broskve";
import PageHeader from "./Components/PageHeader";
import Home from "./Home";
import Hrusky from "./Hrusky";


function App() {
  // 定义公共状态存储当前页面标题
  const [currentPageTitle, setCurrentPageTitle] = useState('')
  return (
    <Router>
      {/* 把当前标题传给导航栏 */}
      <PageHeader title={currentPageTitle}/>

      <Switch>
        <Route exact path="/">
          {/* 传递修改标题的方法给页面组件 */}
          <Home pageTitle="Home" setPageTitle={setCurrentPageTitle}/>
        </Route>
        <Route path="/banany">
          <Banany pageTitle="Bananas" setPageTitle={setCurrentPageTitle}/>
        </Route>
        <Route path="/broskve">
          <Broskve pageTitle="Broskve" setPageTitle={setCurrentPageTitle}/>
        </Route>
        <Route path="/hrusky">
          <Hrusky pageTitle="Pears" setPageTitle={setCurrentPageTitle}/>
        </Route>
      </Switch>

    </Router>
  );
}

export default App;

2. 在每个页面组件中，挂载时同步更新标题
   以Banany组件为例：

import { useEffect } from 'react'

function Banany(props) {
  // 组件挂载时更新公共标题状态
  useEffect(() => {
    props.setPageTitle(props.pageTitle)
  }, [props])

  // 原有组件逻辑
  return <div>Banany页面内容</div>
}
export default Banany

3. 在PageHeader组件中直接渲染传入的title即可

function PageHeader(props) {
  return <nav>
    {/* 其他导航栏内容 */}
    <h1>{props.title}</h1>
  </nav>
}

方案二：抽离路由配置表（更易维护） #

把所有路由的路径、组件、标题信息统一维护在配置表中，直接根据当前路径匹配对应标题，无需修改页面组件：

import { useLocation } from 'react-router-dom'
import {BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Banany from "./Banany";
import Broskve from "./Broskve";
import PageHeader from "./Components/PageHeader";
import Home from "./Home";
import Hrusky from "./Hrusky";

// 统一维护路由配置
const routes = [
  {
    path: '/',
    exact: true,
    component: Home,
    title: 'Home'
  },
  {
    path: '/banany',
    component: Banany,
    title: 'Bananas'
  },
  {
    path: '/broskve',
    component: Broskve,
    title: 'Broskve'
  },
  {
    path: '/hrusky',
    component: Hrusky,
    title: 'Pears'
  }
]

function App() {
  const location = useLocation()
  // 匹配当前路径对应的路由配置，拿到标题
  const currentRoute = routes.find(route => {
    if (route.exact) {
      return location.pathname === route.path
    }
    return location.pathname.startsWith(route.path)
  })
  const currentPageTitle = currentRoute?.title || ''

  return (
    <Router>
      <PageHeader title={currentPageTitle}/>
      <Switch>
        {/* 遍历配置表渲染路由 */}
        {routes.map(route => (
          <Route 
            key={route.path} 
            path={route.path} 
            exact={route.exact}
            component={route.component}
            // 如果仍需要给页面组件传pageTitle可以用render方法
            // render={() => <route.component pageTitle={route.title} />}
          />
        ))}
      </Switch>
    </Router>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Filip Studený