Javascript 反应如何使有条件呈现的导航持久化

我正在学习React，正在创建React桌面应用程序，其中侧导航必须根据用户的当前位置（由应用程序正文中的标准导航按钮确定）进行更改

可在以下位置访问该应用程序：

当用户在应用程序中移动时，我可以有条件地呈现导航选项。参见示例：从“开始”到“A页”，再到“B页”。问题是，当它们移回以前的位置时，导航也会恢复。我希望这样，一旦用户到达B页并返回到A页，B页仍然可以在侧导航中访问

---

从研究来看，使用React上下文API似乎是最好的解决方案。是这样，还是有一种更简单的方法我没有？谢谢。

您可以采用

c0m1t

中提到的方法，使用

useLocation

跟踪当前位置

为了能够始终如一地跟踪位置，并且出于其他更具组织性的原因，我还建议您稍微更改一下应用程序结构

我认为当前结构的一个问题是，

Layout

是每个页面组件的子级。相反，我认为这个组件更适合作为页面的父级，而不是让每个页面都呈现一个

Layout

组件。这同样适用于

标题

组件

我建议您将

App.js

文件更改为如下内容：

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Header />
      <Layout>
        <Switch>
          <Route exact path="/" component={Start} />
          <Route exact path="/page-A" component={PageA} />
          <Route exact path="/page-B" component={PageB} />
          <Route exact path="/page-C" component={PageC} />
        </Switch>
      </Layout>
    </ThemeProvider>
  );
}

然后您可以将

菜单

组件更改为：

const pageLocations = ["/page-A", "/page-B", "/page-C"];
const pages = ["Page A", "Page B", "Page C"];

const Menu = () => {
  const location = useLocation();
  const [locations, setLocations] = React.useState([]);

  React.useEffect(() => {
    const currentPath = location.pathname;
    if (!locations.includes(currentPath)) {
      setLocations([...locations, currentPath]);
    }
  }, [location, locations, setLocations]);

  return (
    <Box>
      <MenuList>
        {pages.map((page, i) => {
          return (
            <MenuItem
              key={i}
              to={pageLocations[i]}
              className={locations.includes(pageLocations[i]) ? "" : "deactive"}
              component={NavLink}
            >
              {page}
            </MenuItem>
          );
        })}
      </MenuList>
    </Box>
  );
};

const pageLocations=[“/page-A”，“/page-B”，“/page-C”]；
常量页=[“A页”、“B页”、“C页]；
常量菜单=（）=>{
const location=useLocation（）；
const[locations，setLocations]=React.useState（[]）；
React.useffect（（）=>{
const currentPath=location.pathname；
如果（！位置.包括（当前路径））{
设置位置（[…位置，currentPath]）；
}
}，[位置，位置，设置位置]；
返回(
{pages.map（（第页，i）=>{
返回(
{page}
);
})}
);
};

因此，方法是从菜单中跟踪以前访问过的所有页面。位置映射到每个菜单项，我们可以根据已访问的所有位置和映射到菜单项的位置检查是否应显示菜单项

此答案不适用于从特定页面（如

/page-a

）的url开始而不是从

/

开始的情况

---

---

您使用的是redux吗？不，您能再解释一下逻辑吗？对于某些页面，是否要显示上一页导航栏而不是当前页面导航栏？或者只是将上一页链接添加到当前导航栏？您可以将内容和导航栏分开，并保持所访问页面的状态，并根据该状态有条件地呈现。这可能根本不需要上下文，您只需保存指向您所在州的链接。但我不确定我是否理解其中的逻辑right@c0m1t非常感谢。第二种选择最接近我想要的。基本上有两种导航系统：通过应用程序的页面顺序移动和侧栏中不连续的全局导航。当用户通过主页浏览应用程序时，他们浏览的页面应显示在侧导航中。如果用户已经到达C页，他们应该在侧导航中看到A和B。这是可行的，但问题是，如果它们在C上并返回到A，那么B页和C页不会在nav中持久存在。用户“再次启动”，必须使用页面上的按钮导航到C。您可以使用类似的钩子，因此每次用户更改位置时，都会调用此钩子，您可以将当前位置保存到您的状态。您也可以将其保存在

ref

中。

const pageLocations = ["/page-A", "/page-B", "/page-C"];
const pages = ["Page A", "Page B", "Page C"];

const Menu = () => {
  const location = useLocation();
  const [locations, setLocations] = React.useState([]);

  React.useEffect(() => {
    const currentPath = location.pathname;
    if (!locations.includes(currentPath)) {
      setLocations([...locations, currentPath]);
    }
  }, [location, locations, setLocations]);

  return (
    <Box>
      <MenuList>
        {pages.map((page, i) => {
          return (
            <MenuItem
              key={i}
              to={pageLocations[i]}
              className={locations.includes(pageLocations[i]) ? "" : "deactive"}
              component={NavLink}
            >
              {page}
            </MenuItem>
          );
        })}
      </MenuList>
    </Box>
  );
};