Как я могу использовать history.push () и вызывать функцию одновременно? - PullRequest
Новая
       22

Как я могу использовать history.push () и вызывать функцию одновременно?

0 голосов
/ 05 апреля 2019

Я хочу реализовать кнопку в панели приложений, предоставляемой пользовательским интерфейсом материалов, чтобы при нажатии она перенаправляла меня на новую страницу (с «/» на «/ login»). Итак, я использовал history.push (), и это работает. Но страница не отображает другой компонент, который должен отображаться. Компонент является функцией. Как я могу сделать эту работу?

Я новичок в ReactJS, и я использую материал из Material-UI, так что я не умею настраивать вещи в свою пользу.

Это много кода, поэтому я сделал рабочий пример для тех, кто хочет понять, что я имею в виду: https://codesandbox.io/embed/6jmlxlj3wz?fontsize=14

Ответы [ 2 ]

0 голосов
/ 05 апреля 2019

Несколько вещей:

В вашем 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

0 голосов
/ 05 апреля 2019

Используйте Reaction-router-dom для управления вашими маршрутами и для функции history.push. Его поддержка React встроена, так что он будет гораздо более декларативным для вас.

...