时间戳

首页 > 解决方案 > 使用标头中使用的状态并基于带有钩子的 Route 更新其内容

reactjs - 使用标头中使用的状态并基于带有钩子的 Route 更新其内容

问题描述

我正在尝试根据路由中的文本更新标题。但似乎无法让标题更新。我正在使用useState()钩子。我也使用useEffect()了钩子，但标题似乎没有更新。所以标题应该说“新标题”而不是“默认标题”。我正在为我的路由器使用“react-router-dom”。

app.js是 ：

function App() {
  const [header, setHeader] = useState('default header')
  return (
    <div className="App">
      <BrowserRouter>
        <Navigation />
        <Header heading={header} />
        <main>
          <Route exact path='/case-study' render={routeProps => (
            <Child {...routeProps} setHeader={() => setHeader} />
          )} />
        </main>
        <Footer />
      </BrowserRouter>
    </div>
  );
}

我的孩子路线是：

const CaseStudy = (props) => {
    useEffect(() => {
        props.setHeader('new header')
    })
    return(
        <h1>test</h1>
    )
}

标签： reactjsreact-router-dom

解决方案

试试这个：

 <Child {...routeProps} setHeader={setHeader} />

推荐阅读