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

Question

我在使用 react-router-dom 时无法更改 URL 和加载组件。但是，如果我手动输入组件将加载的 URL，当我单击链接时 URL（和组件）不会更改。在这种情况下，我正在尝试加载“/industry/aerospace”页面。谢谢！

这是我的代码：

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（带有页面链接）：

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（要加载的组件）：

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

尝试从 Link 组件包装 MenuItem：

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

由于您使用的是 material-ui，因此您还可以在 MenuItem 中使用组件属性（这会将组件设置为根）

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

希望对你有帮助