Нижняя навигация исчезает при нажатии на маршрут

Question

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

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

Вот мой корневой компонент приложения

const App: React.FC = () => {
  return (
    <Router>
      <div>
        <NavBar sideBarOpen={false}/>

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

        <BottomNav />
      </div>
    </Router>
  );
}

Вот мой компонент питания

class Meals extends React.Component{

    public render() {

        return (
            <div>
                <div>Meals Component</div>
            </div>
        )
    }
}

Вкл. при начальной загрузке приложения я вижу оба навигационных меню:

См. начальную загрузку

Когда я нажимаю на навигационную ссылку на питание, моя нижняя навигационная панель удаляется:

Отсутствует нижняя навигация

Вот мой нижний навигационный компонент. Я использую перенаправление реакции-маршрутизатор для изменения маршрутов.

class BottomNav extends React.Component<BottomNavProps,BottomNavState>{

    constructor(props: BottomNavProps) {
        super(props);
        this.state = {
            route : '/' 
        }     
        this.setRoute = this.setRoute.bind(this);
    }

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

    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>
        )
    }
}

Я хочу иметь возможность поддерживать навигацию по верху / низу / ящику во время навигации по приложению. Что я делаю не так?

Answer 1

В нижнем компоненте навигации у вас есть оператор if внутри вашей функции render:

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

Это в основном говорит о том, что если маршрут meals перенаправить на mealsмаршрут, который не имеет никакого смысла, потому что пользователь уже там. Когда условие выполнено, возврат компонента <Redirect to='/meals' /> приведет к тому, что HTML-код, который будет отображать навигацию, не будет достигнут.

Этот оператор if блокирует рендеринг компонента при маршруте meals, поэтому имеет смысл, что он не отображается при изменении маршрута на этот.

Удалите оператор if в функции render, и вы должны увидеть навигационный рендеринг, когда ваш маршрут изменится на /meals.

Bottom Nav Компонент:

class BottomNav extends React.Component<BottomNavProps,BottomNavState>{

    constructor(props: BottomNavProps) {
        super(props);
        this.state = {
            route : '/' 
        }     
        this.setRoute = this.setRoute.bind(this);
    }

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

    public render() {

        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>
        )
    }
}

Имеет смысл? Дайте мне знать, если я могу объяснить дальше!

РЕДАКТИРОВАТЬ, ЧТОБЫ ОБЪЯСНИТЬ ВОПРОС В КОММЕНТАРИЯХ:

https://material -ui.com/components/bottom-navigation/
Если вы следуете документации пользовательского интерфейса материала (нажмите кнопку Показать исходный код в первом примере), вы заметите, что использование атрибута value на<BottomNavigation> предназначен для изменения стиля нижней навигации, чтобы отразить активный маршрут, но НЕ для изменения самого маршрута.

Теоретически, он должен работать следующим образом (я удаляю некоторые из вашихпроверка типа для наглядности):

class BottomNav extends React.Component{

    constructor(props: BottomNavProps) {
        super(props);
        this.state = {
            value: 0
        }     
        this.handleValueChange = this.handleValueChange.bind(this);
        this.handleRouteChange = this.handleRouteChange.bind(this);
    }

    // programmatically change the styling (material UI documentation)
    public handleValueChange = (value) => {
        this.setState({
            value
        })
    }

    // programmatically change the route
    public handleRouteChange = (newRoute) => {
      history.push(newRoute)
    }

    public render() {

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