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, кажется, получил монтирование и размонтирование дважды, так как родительский элемент рендерится, а наборы также являются частью приложения.

Это вызывает ненужные вызовы API внутри дочернего компонента.

Есть ли способ решить эту проблему?

Answer 1

Если скрытие одного (MyNavBar) компонента путем перехода к одному (или более) URL-адресу является целью, что-то вроде может работать . К сожалению, отрицательный поиск (регулярное выражение) не поддерживается реагирующим маршрутизатором , поэтому мы не можем использовать что-то вроде этого (?!child).

Еще одна вещь, которую вы можете сделать, - MyNavBar знать Текущий URL, обернув его withRouter HO C или используя useLocation hook. Чем вы можете сделать свою логику c в MyNavBar в зависимости от URL.

Answer 2

Рассматривали ли вы добавление Navbar в качестве компонента в Маршруты вместо использования состояния, чтобы решить, должна ли быть навигационная панель видимой или нет?

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