reactjs - React Material UI BottomNavigation 组件路由问题

Question

我正在尝试从 Material UI 实现 BottomNavigation 组件，但当用户使用浏览器的后退和前进按钮时遇到问题。

问题是，BottomNavigation 组件被配置为在按下导航项按钮时更改布局中的页面。但是，当浏览器用于返回上一页时，它不会更改 BottomNavigation 项目的选定索引。

我留下的是不一致的状态。

使用浏览器按钮时如何更改导航组件的选定索引？

这是用户界面的外观:-

[

这是根组件:-

import React from 'react'
import {browserHistory, withRouter} from 'react-router';
import {PropTypes} from 'prop-types'
import {connect} from 'react-redux'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import AppBar from 'material-ui/AppBar'
import Paper from 'material-ui/Paper'
import MyBottomNavigation from '../material-ui/MyBottomNavigation'

const style = {
    padding: 10,
    height: '85vh'

  }

class Root extends React.Component {
    constructor(props) {
        super(props)   

        this.state  = {
            bottomNavItemIndex : 0
        }
    }


    render() {
        return (
            <MuiThemeProvider>
                <div>
                    <AppBar title="Pluralsight Admin" 
                        iconClassNameRight="muidocs-icon-navigation-expand-more"
                        showMenuIconButton={false}
                        zDepth={1}
                        />
                    <Paper zDepth={1} style={style}>
                        {this.props.children}
                    </Paper>
                    <MyBottomNavigation/>
                </div>
            </MuiThemeProvider>

        )
    }
}


Root.propTypes = {
    children: PropTypes.object.isRequired
}



export default Root

这是导航组件:-

class MyBottomNavigation extends Component {
    constructor(props){
        super(props)
        this.state = {
            selectedIndex: 0
          }

        this.selectBottomNavigationItem = this.selectBottomNavigationItem.bind(this)
    }

  selectBottomNavigationItem(index){
    this.setState({selectedIndex: index})

    switch(index) {
        case 0:
        return browserHistory.push('/')
        case 1:
        return browserHistory.push('/courses')
        case 2:
        return browserHistory.push('/authors')
        default:
        return browserHistory.push('/')
    }
  }


  render() {
    return (
      <Paper zDepth={1}>
        <BottomNavigation selectedIndex={this.state.selectedIndex}>

          <BottomNavigationItem
            label="Home"
            icon={recentsIcon}
            onClick={() => this.selectBottomNavigationItem(0)}
          />

          <BottomNavigationItem
            label="Course"
            icon={favoritesIcon}
            onClick={() => this.selectBottomNavigationItem(1)}
          />

          <BottomNavigationItem
            label="Authors"
            icon={nearbyIcon}
            onClick={() => this.selectBottomNavigationItem(2)}
          />
        </BottomNavigation>
      </Paper>
    )
  }
}


export default MyBottomNavigation

Answer 1

刚刚实现了一个工作!

诀窍是制作一个新的导航栏组件来包装 Material UI BottomNavigation并将其导出为 react-router-dom的withRouter高阶函数。然后你可以对传递到 props 中的当前路由进行一些修改，并设置 BottomNavigation 的值。基于路由数组的组件(哪个路由对应哪个值)。

我的代码的工作方式与您最初发布的代码有点不同，我只是离开 BottomNavigation示例 here以及 react-router-dom 的使用示例here .

这是我的实现:

/src/App.js

import React, {Component} from 'react';
import './App.css';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import PrimaryNav from './components/PrimaryNav';

// Views
import HomeView from './views/HomeView';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="app">
          <Route path="/" component={HomeView} />        
          <PrimaryNav />
        </div>
      </Router>
    );
  }
}

export default App;

/src/components/PrimaryNav.js

import React, {Component} from 'react';
import {Link, withRouter} from 'react-router-dom';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import LanguageIcon from '@material-ui/icons/Language';
import GroupIcon from '@material-ui/icons/Group';
import ShoppingBasketIcon from '@material-ui/icons/ShoppingBasket';
import HelpIcon from '@material-ui/icons/Help';
import EmailIcon from '@material-ui/icons/Email';
import './PrimaryNav.css';

class PrimaryNav extends Component {
  state = {
    value: 0,
    pathMap: [
      '/panoramas',
      '/members',
      '/shop',
      '/about',
      '/subscribe'
    ]
  };

  componentWillReceiveProps(newProps) {
    const {pathname} = newProps.location;
    const {pathMap} = this.state;

    const value = pathMap.indexOf(pathname);

    if (value > -1) {
      this.setState({
        value
      });
    }
  }

  handleChange = (event, value) => {
    this.setState({ value });
  };

  render() {
    const {value, pathMap} = this.state;

    return (
      <BottomNavigation
        value={value}
        onChange={this.handleChange}
        showLabels
        className="nav primary"
      >
        <BottomNavigationAction label="Panoramas" icon={<LanguageIcon />} component={Link} to={pathMap[0]} />
        <BottomNavigationAction label="Members" icon={<GroupIcon />} component={Link} to={pathMap[1]} />
        <BottomNavigationAction label="Shop" icon={<ShoppingBasketIcon />} component={Link} to={pathMap[2]} />
        <BottomNavigationAction label="About" icon={<HelpIcon />} component={Link} to={pathMap[3]} />
        <BottomNavigationAction label="Subscribe" icon={<EmailIcon />} component={Link} to={pathMap[4]} />
      </BottomNavigation>
    );
  }
}

export default withRouter(PrimaryNav);

这是我的版本号:

"@material-ui/core": "^1.3.1",
"@material-ui/icons": "^1.1.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",