Reactjs 使用withStyles时，反应路由器未按预期工作

我做了一个快速搜索，在stackoverflow中找不到相关的解决方案，但是如果我没有找到，请直接告诉我，并为重复的问题道歉

我的问题是，当使用with styles时，react路由器没有按预期工作。 当你点击“主页”链接两次，第二次显示空白页面。如果我不使用“withStyles”并正常导出它，它的效果会比预期的好

提前非常感谢您的回答

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

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

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;

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

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

从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
导入“./css/index.css”；
从“./components/App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
从“/store”导入{history}；
ReactDOM.render((
),
document.getElementById（'root'）；
//如果你想让你的应用程序离线工作并更快地加载，你可以更改
//取消注册（）以在下面注册（）。注意，这有一些陷阱。
serviceWorker.unregister（）；

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

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;

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

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

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Link}；
从“./Contact”导入联系人；
从“/关于”导入关于；
从“./主页”导入主页；
从“./头”导入头；
导入“../css/App.css”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

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

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;

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

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

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
从“@material ui/core/styles”导入{makeStyles，withStyles}”；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
const useStyles=makeStyles（主题=>({
根目录：{
flexGrow:1，
},
菜单按钮：{
边缘光：主题。间距（2），
},
标题：{
flexGrow:1，
},
链接：{
边距：主题。间距（1），
}
}));
类头扩展组件{
render（）{
const classes=this.props；
返回(


家


关于


接触


);
}
}
导出默认样式（useStyles）（标题）；

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

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;

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

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

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
从“@material ui/core/styles”导入{makeStyles，withStyles}”；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Typography”导入排版；
从“道具类型”导入道具类型；
从“react router dom”导入{withRouter}；
const useStyles=makeStyles（主题=>({
根目录：{
填充：主题。间距（3,2），
},
}));
类Home扩展组件{
建造师（道具）{
超级（道具）；
此.state={
};
}
render（）{
const{classes}=this.props
返回(
这是主页
);
}
}
Home.propTypes={
类：PropTypes.object.isRequired
};
//正如你所知道的，我用过withRouter和Wither，用过withRouter和Wither也一样
//两者
//const Home withRouter=withRouter（Home）；
//使用样式导出默认值（使用样式）（HomeWithRouter）；
导出默认样式（useStyles）（主）；

makeStyles是功能组件的挂钩，您使用的是带有HOC的类组件

改变

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

到

然后改变

export default withStyles(useStyles)(Home);

到

---

对主页和页眉组件都这样做。老实说，我可能只是将类转换为带有钩子的功能组件，但无论哪种方式，您都必须使用钩子或类，但不能将两者混合使用。

正如Jake所提到的，makeStyles是一个钩子，而且

不能在类组件内部使用挂钩

参考：

我相信使用钩子可以使代码比类组件更简洁，您可以将您的主组件编写为钩子：

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;

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
从“@material ui/core/styles”导入{makeStyles，withStyles}”；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core/Typography”导入排版；
从“道具类型”导入道具类型；
从“react router dom”导入{withRouter}；
const useStyles=makeStyles（主题=>({
根目录：{
填充：主题。间距（3，2）
}
}));
const Home=props=>{
const[state，setState]=React.useState（{}）；
const classes=useStyles（）；
返回(
这是主页
);
};
Home.propTypes={
类：PropTypes.object.isRequired
};
导出默认主页；

控制台中有任何错误吗？谢谢，这很有效，我也会考虑改用功能组件。谢谢回答，这也很有效，我会考虑是否应该改用功能组件，除非我必须使用类组件。如果我能把两个答案都标对就好了。