Question

因此，我试图根据我所在的页面更新导航栏背景，但是当我用console.log登录window.location.pathname时，它没有正确显示路径名。

这是我根据路径名更改导航栏状态的功能

const [navbar, setNavbar] = useState(false)

const updateNavbar = () => {
    if (window.location.pathname !== "/") {
        setNavbar(true)
    } else {
        setNavbar(false)
    }

    console.log(window.location.pathname)
}

这是我样式化的组件

const Nav = styled.nav`
background: ${({ navbar }) => (navbar ? "red" : "blue")};

然后将其传递给我的JSX

<Nav navbar={navbar}>
{menuData.map((item, index) => (
    <NavLink to={item.link} key={index} onClick={updateNavbar}>
      {item.title}
    </NavLink>
))}

问题在于，如果我单击“关于”菜单项，则会在控制台中显示

然后，如果我再次单击，则显示

/about

因此，当我单击about时，它会在屏幕上直观地更改页面，但是控制台会记录/，因此，为了使导航栏更改颜色，我必须单击about再次，这没有任何意义。我几乎必须单击两次以更新颜色。

为什么window.location.pathname不会自动更新到我所在的页面，而不显示我单击的上一个链接，然后仅在再次单击该链接后，它才显示正确的路径？

此外，我正在使用Gatsby JS并具有AOS动画，但是我认为这并不重要。

更新：如果我将其传递到useEffect钩子中，则显示/，然后显示/about，但是为什么不只显示/about而不显示两个我单击的上一个和新链接？

useEffect(() => {
    updateNavbar()
}, [])

Answer 1

渲染路线之前，您的控制台打印内容！

因此您可以使用：

setTimeout(function(){ console.log(window.location.pathname) }, 3000);

在路线更改后打印或获取路径。

Answer 2

我怀疑代码无法正常工作，因为您在导航到另一页的同时设置了try { let collection = db.collection('collection_name'); let { ops: inserted } = await collection.insertOne({ data: object }); // can access array of inserted record like : console.log(inserted) } catch (error) { // log errors }函数。对您可能有用的是：

onClick

基本上，您可以防止代码在设置状态之前导航到页面。将本机const updateNavbar = (destination) => { if (typeof window !== 'undefined' && window.location.pathname !== "/") { setNavbar(true) navigate("destination") } else if(typeof window !== 'undefined') { setNavbar(false) navigate("/") } console.log(window.location.pathname) } <NavLink key={index} onClick={updateNavbar(item.link)}> {item.title} </NavLink> to更改为prop函数。

另一种可能适合您的解决方法是使用Gatsby navigate组件中的状态：

<Link>

您可以使用<Link to={`/your/page`} state={{ navbar: true }} >来检索值。

我已经添加了它，为您提供了一种方法。另一方面，由于您正在使用window (a global object)，并且由于props.location.state.navbar在服务器中没有窗口的服务器中，因此上面的代码将在构建模式（gatsby build）中中断。中断编译。您应该将gatsby build的所有用法包装在里面：

window

但是，还有一种更本地化的方法。由于Gatsby是从React（和if (typeof window !== `undefined`) { // your stuff }）扩展而来的，因此它在顶层组件（页面）上公开了prop named location，其中包含了您所需的所有信息。当然，您可以将页面组件的缺点传递给任何雾化组件以使用它。

经过反复试验，我们通过以下方法解决了该问题：

@react/router

React Navbar路径名在页面更改时无法正确显示吗？

2 个答案: