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

Question

我有一个类父类应用程序，包含一个导航栏和一堆路线：

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似乎被装载和卸载了两次，因为父级被渲染，圆形也是应用程序的一部分。

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

有什么办法解决这个问题吗？

Answer 1

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

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

Answer 2

如果通过导航到一个(或多个(url来隐藏一个(MyNavBar(组件是一个目标，那么类似的方法也可以。不幸的是，react路由器不支持负查找(regex(，所以我们不能使用类似于(?!child)的东西。

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