Question

我想在Material UI提供的AppBar中实现一个按钮，单击该按钮会将我重定向到新页面（从'/'到'/ login'）。因此，我使用了history.push（），它可以正常工作。但是，该页面不会呈现应显示的其他组件。该组件是一个功能。我该如何工作？

我是ReactJS的新手，我使用的是Material-UI中的内容，所以我不擅长调整内容。

这是很多代码，因此我为那些想要了解我的意思的人提供了一个有效的示例： https://codesandbox.io/embed/6jmlxlj3wz?fontsize=14

Answer 1

使用react-router-dom来管理您的路由和history.push功能。它对React的支持是内置的，因此它将为您提供更具声明性的编码体验。

Answer 2

几件事：

在您的App.js中，您正在将历史记录传递到Router，但是您尚未导入它...

import React, { Component } from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Login from './components/Login';
import history from './history'; // import it to use it

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <div className="App">
          <Switch>
            <Route exact path="/" component={Home} /> // notice I also added exact
            <Route path="/login" component={Login} />
          </Switch>
        </div>
      </Router>
    );
  }
}

export default App;

这是您Home.js的清理工作...（不需要handleClick函数...）

function gotoLogin() {
  history.push('/login');
}

function ContainedButtons(props) {
  const { classes } = props;
  return (
    <div>
      <Button
        variant="contained"
        color="secondary"
        className={classes.button}
        onClick={gotoLogin}
      >
        Login
      </Button>
    </div>
  );
}

在此处查看有效的演示：https://codesandbox.io/s/ovwrm11wl5

如何使用history.push（）并同时调用一个函数？

2 个答案: