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();

Приложение. 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),
  },
}));

на

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

И затем измените

export default withStyles(useStyles)(Home);

до

export default withStyles(styles)(Home);

Сделайте это как для вашего дома, так и для ваших компонентов заголовка. Хотя, честно говоря, я бы, вероятно, просто преобразовал класс в функциональный компонент вместо хуков, но в любом случае вы должны либо использовать хуки или классы, но не можете смешивать их.

Answer 2

Как упоминал Джейк, makeStyles - это ловушка, и

Вы не можете использовать крючки внутри компонента класса.

см.: https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both

Я полагаю, что использование хуков может сделать код более лаконичным, чем компонент класса, вместо этого вы можете написать свой компонент Home в виде хуков:

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

const Home = props => {
  const [state, setState] = React.useState({});
  const classes = useStyles();

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

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

export default Home;