Question

我有一个非常基本的应用程序，在这里我试图学习react-router以及如何将其用于其他应用程序。当我使用底部导航导航到新路线时，底部导航消失了。

我尝试将路线放在App组件的底部，但似乎无济于事。如果我手动重新加载/ meals路线，导航会重新出现。

这是我的根应用程序组件

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

在初始应用加载时，我可以看到两个导航菜单：

See initial load

当我单击餐导航时，底部的导航将被删除：

Missing bottom nav

这是我的底部导航组件。我正在使用react-router重定向来更改路由。

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时，应该会看到导航呈现。

底部导航组件：

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/
如果您遵循Material UI的文档（单击第一个示例上的show source code按钮），则会注意到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>
        )
    }
}

单击路线时底部导航消失

1 个答案: