根据 url 路径名更改更新反应中的值

Question

情况是这样的。我有一个 Navbar 组件，它有一个标题，我有几条路径具有不同的路径名，比方说 /path1、/path2 和 /path3。我想要实现的是，我访问的每条路线，我都希望看到应用栏的不同标题。

在我的 appbar 组件中，我试过这个：

const [appBarTitle, setAppBarTitle] = useState('');

>     function listenToPopstate() {
>       if(window.location.pathname === '/path1') {
>       setAppBarTitle('/path1')
>     } else if(window.location.pathname === '/path2') {
>       setAppBarTitle('/path2')
>     }}

那么，我正在使用这个功能

> useEffect(() => {   window.addEventListener('popstate',
> listenToPopstate);   listenToPopstate();   return () =>
> window.removeEventListener('popstate', listenToPopstate); }, [])

然后我将该值作为标题传递给 AppBar 组件。

预期行为：每次重新路由后更新应用栏标题。实际行为：只有在我刷新页面后才会发生。

我试图了解，是否有类似 onhashchange 的路径名更改。所以我不知道如何进行。

非常感谢任何帮助或建议。

Answer 1

我可能会利用 react-router-dom 的 useLocation 钩子。

Here's a link 到您正在查找的示例。

基本上，您可以使用 useLocation 挂钩中的 pathname 键来确定您所在的路线。并使用 pathname 作为 PAGE_TITLES object 的键，return 更新的标题。

import { Link, useLocation } from "react-router-dom";

const PAGE_TITLES = {
  "/": "This is the Home page",
  "/child": "Welcome to the Child page"
};

function NavBar() {
  const { pathname } = useLocation();
  return (
    <ul>
      <h1>Page: {PAGE_TITLES[pathname]}</h1>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/child">Child</Link>
      </li>
    </ul>
  );
}

根据 url 路径名更改更新反应中的值

Update a value in react based on the url pathname change

path

reactjs