React Router在使用withStyles时无法按预期工作

Question

我进行了快速搜索，但在stackoverflow中找不到相关的解决方案，但是如果我错过了，请直接把我送到那儿，对不起重复。

我的问题是在使用withStyles时反应路由器无法按预期工作。当您单击“主页”链接两次时，第二次显示空白页。如果我不使用“ withStyles”并将其正常导出，则它会按预期工作。

非常感谢您的回答。

请参见下面的代码。基本上，“联系人”和“关于”的其他2个文件与“首页”相同，只是名称不同。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './css/index.css';
import App from './components/App';
import * as serviceWorker from './serviceWorker';
import { history } from './store';


ReactDOM.render((
  <Router history={history}>
    <App/>
  </Router>),
document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Contact from './Contact';
import About from './About';
import Home from './Home';
import Header from './Header';
import '../css/App.css';


class App extends Component {
  render() {
    return (
        <div>
            <Header/>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/about" component={About} />
                <Route path="/contact" exact component={Contact} />
                <Route component={Error} />
            </Switch>
        </div>
    );
  }
}

export default App;

Header.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
  link: {
    margin: theme.spacing(1),
  }
}));


class Header extends Component {
  render() {
      const classes = this.props;

      return (
        <div>
            <ul>
                <li>
                    <Link to="/">Home</Link>
                </li>
                <li>
                    <Link exact to="/about">About</Link>
                </li>
                <li>
                    <Link exact to="/contact">Contact</Link>
                </li>
            </ul>
        </div>
      );
  }
}

export default withStyles(useStyles)(Header);

Home.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
  },
}));


class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
    const { classes } = this.props

    return (
            <div>
              <Paper className={classes.root}>
                <Typography variant="h5" component="h3">
                  This is Home page
                </Typography>
              </Paper>
            </div>
        );
    }
}

Home.propTypes = {
    classes: PropTypes.object.isRequired
};

//just so you know I have used with both withRouter and without and its the same with 
//both 

//const HomeWithRouter = withRouter(Home);
//export default withStyles(useStyles)(HomeWithRouter);
export default withStyles(useStyles)(Home);

Answer 1

makeStyles是功能组件的钩子，您正在将类组件与HOC一起使用。

更改

const useStyles = makeStyles(theme => ({
  root: {
    padding: theme.spacing(3, 2),
  },
}));

to

const styles = theme => ({
  root: {
    padding: theme.spacing(3, 2),
  },
});

然后更改

export default withStyles(useStyles)(Home);

to

export default withStyles(styles)(Home);

对Home和Header组件都执行此操作。不过，老实说，我可能只是将类转换为带有钩子的功能组件，但是无论哪种方式，您都必须使用钩子或类，但不能将两者混用。