为什么react-router-dom不会更改点击的URL？

Question

I am having trouble changing the URL and getting the component to load when using react-router-dom. If I manually enter the URL the component will load, however, the URL (and component) does not change when I click on the link. In this case, I am trying to load the '/industry/aerospace' page. Thanks!

Here's my code:

App.js:

import React from 'react'
import { compose } from 'redux'
import { Route, Switch, withRouter } from 'react-router-dom'
import { MuiThemeProvider } from '@material-ui/core/styles'

import LandingPage from '../../home'
import AnalyzerProductPage from '../../home/analyzer'
import MonitorProductPage from '../../home/monitor'
import Signout from '../../home/signout'
import Industry from '../../home/industry'

class App extends React.PureComponent {
  render() {
    return (
      <div>
        <MuiThemeProvider theme={muiTheme} >
          <Switch>
            <Route exact path="/" component={LandingPage} />
            <Route exact path="/version" component={Version} />
            <Route exact path="/signout_success" component={LandingPage} />
            <Route exact path="/signout" component={Signout} />
            <Route exact path="/liquidtool-analyzer" component={AnalyzerProductPage} />
            <Route exact path="/liquidtool-monitor" component={MonitorProductPage} />
            <Route exact path="/industry/:industry" component={Industry} />
          </Switch>
        </MuiThemeProvider>
        <NotificationHandler />
        <RestCallProgressBar />
      </div>
    )
  }
}

export default compose(
  withRouter,
)(App)

HomeHeader.js (with link to page):

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'

// material-ui
import { withStyles } from '@material-ui/core/styles'

class HomeHeader extends Component {
  state = {
    value: false,
    anchorEl: null
  };

  handleIndustriesClick = (event) => {
    this.setState({ anchorEl: event.currentTarget })
  };

  handleIndustriesClose = (pageID) => {
    this.setState({ anchorEl: null })
  }

  handleDashboardClick = () => {
    this.props.history.push('/dashboard')
  };

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


  render() {
    const { classes } = this.props
    const { value } = this.state
    const { anchorEl } = this.state

    return (
      <AppBar className={classes.appBar} elevation={this.props.elevation}>
        <Hidden smDown>
          <Grid container justify="space-between" alignItems="center">
            <Tabs value={value} onChange={this.handleChange}>
              <Tab label="monitor" />
              <Tab label="sensor" />
              <Tab 
                label="industries" 
                aria-owns={anchorEl ? 'industries-menu' : null}
                aria-haspopup={true}
                onClick={this.handleIndustriesClick}
              />
              <Menu
                id="industries-menu"
                anchorEl={anchorEl}
                open={Boolean(anchorEl)}
                onClose={this.handleIndustriesClose}
              >
                <MenuItem onClick={this.handleIndustriesClose}><Link to={'/industry/aerospace'}></Link>Aerospace</MenuItem>
              </Menu>
            </Tabs>
          </Grid>
        </Hidden>
      </AppBar>
    )
  }
}

export default withStyles(styles)(HomeHeader)

Industry.js (Component to load):

import React, { Component } from 'react'; 

import Typography from '@material-ui/core/Typography';
import HomeHeader from '../components/HomeHeader'

class Industry extends Component {

  render() {
    return(
      <div>
        <HomeHeader />
        <Typography>Hey</Typography>
      </div>
    )
  }
}

export default Industry

Answer 1

try to wrap MenuItem from Link component:

<Link to='/industry/aerospace'>
 <MenuItem>
  Aerospace
 </MenuItem>
</Link>

since you are using material-ui you can also use component prop in MenuItem (which will set the component as root)

<MenuItem component={Link} to='/industry/aerospace'>
 Aerospace
</MenuItem>

hope this will help you