Поддерживать навигацию сверху / снизу при навигации по маршрутам через реагирующий маршрутизатор - PullRequest
Новая
       8

Поддерживать навигацию сверху / снизу при навигации по маршрутам через реагирующий маршрутизатор

0 голосов
/ 26 сентября 2019

У меня есть базовое приложение реакции, которое я начинаю создавать.Моя цель - разработать макет, который имеет верхнюю / нижнюю навигацию при отображении различных компонентов в теге .Прямо сейчас, если я попал в приложение, используя маршрут напрямую, навигация сохраняется.Однако, если я использую компонент внутри одного из моих гнездовых компонентов, все, что находится под моим маршрутом, удаляется из DOM.

Я создал базовое приложение с верхней навигацией, основной и нижней навигацией.Когда выбран маршрут / прием пищи, отображается компонент питания.Это работает, как и ожидалось, когда я ударил / питание напрямую.Однако, когда я использую нижнюю навигацию для перенаправления на этот маршрут, я теряю свою нижнюю навигацию.

Мой app.tsx выглядит так: 

    <Router>
      <div>
        <nav>
          <NavBar sideBarOpen={false}/>
        </nav>

        <main>
          <Route path="/meals" component={Meals} />  
        </main>

        <BottomNav />
      </div>
    </Router>

Моя нижняя навигация имеет щелчок, которыйперенаправляет пользователя на выбранный маршрут.

УСТАНОВИТЬ МЕТОД МАРШРУТА 

    public setRoute = (route: string) => {
        this.setState({
            route: route
        })
    }

BottomNav.tsx RENDER () 

    public render() {

        if (this.state.route === "meals") {
            return <Redirect to='/meals' />
        }

        return (
            <div className="grow">
                <BottomNavigation className="bottomNavigation" value={this.state.route} onChange={(event, newValue:string) => { this.setRoute(newValue); }} showLabels>
                    <BottomNavigationAction label="Home" icon={<HomeIcon />} value=""/>
                    <BottomNavigationAction label="Lists" icon={<PlaylistAddCheckIcon />} value="lists" />
                    <BottomNavigationAction label="Menus" icon={<MenuBookIcon />} value="menus" />
                    <BottomNavigationAction label="Meals" icon={<RestaurantMenuIcon />} value="meals" />
                    <BottomNavigationAction label="more" icon={<MoreHorizIcon />} />
                </BottomNavigation>
            </div>
        )
    }

Я хочу иметь возможность легко обновитьсодержание с моим тегом, оставляя навигацию сверху и снизу нетронутой.Прямо сейчас, это удаляет нижнюю навигацию, когда маршрут перенаправлен.

...