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

【问题标题】：React-router-dom how to update parent state inside route componentReact-router-dom 如何更新路由组件内的父状态
【发布时间】：2020-03-27 01:35:22
【问题描述】：

我有一个类父类 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 调用。

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

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

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

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

【讨论】：

谢谢！这绝对是一个解决方案。但是，实际情况可能更复杂，因为其他页面可能希望在子组件呈现后保留导航栏的状态（例如搜索框中的用户搜索输入）。因此，这可能会引入额外的工作来协调不同页面之间的导航栏状态。

【解决方案2】：

如果通过导航到一个（或多个）网址来隐藏一个（MyNavBar）组件是一个目标，例如this could work。不幸的是，否定查找（正则表达式）is not supported by react router，所以我们不能使用类似 (?!child) 的东西。

您可以做的另一件事是通过包装withRouter HOC 或使用useLocation 钩子使MyNavBar 了解当前网址。然后，您可以根据 url 在MyNavBar 中执行您的逻辑。

【讨论】：