React-router-dom 如何更新路由组件内的父状态

Question

我有一个包含导航栏和一堆路由的父类 App 类：

function App() {
    const [showNavbar, setShowNavbar] = useState(true);

    return (
        <>

            <MyNavBar show={showNavbar}/>
            <Switch>
                <Route exact path='/child' component={() => <ChildPart setter={showNavbar}/>}/>
                <Route> ... //other routes
            </Switch>
        </>
    )
}

function ChildPart(props) {
    const [data, setData] = useState("");

    // hide navbar
    useEffect(() => {
        console.log("child init"); // this got printed twice


        props.setter(false);
    }, [props.setter]);

    // get data at first mount;
    useEffect(()=>{
        setData(api.loadUserInfo());

    }, []);

    return (<div>
        Data here: {data}
    </div>)
}

我想要实现的是根据用户当前所在的页面更改导航栏。 例如，当使用访问/child时隐藏导航栏

但是通过这种方式实现它，ChildPart 似乎被挂载和卸载了两次，因为父被渲染并且 rotues 也是应用程序的一部分。

这会导致子组件内部不必要的 API 调用。

有没有办法解决这个问题？

Answer 1

您是否考虑过将导航栏作为组件添加到路由中，而不是使用状态来决定导航栏是否应该可见？

<Switch>
    <Route exact path='/child' component={ChildPart}/> 
    <Route path="">
         <MyNavBar />
         <Home />
    </Route>
</Switch>

Answer 2

如果通过导航到一个（或多个）网址来隐藏一个（MyNavBar）组件是一个目标，那么像这样的事情可能会起作用。 不幸的是，react 路由器不支持负查找（regex） ，所以我们不能使用这样的东西(?!child) 。

你可以做的另一件事是使MyNavBar通过包装就知道当前URL withRouter HOC或使用useLocation挂钩。 然后，您可以根据 url 在MyNavBar执行逻辑。