0

Preciso fazer um redirecionamento para a raiz '/' estou tentando usar o history.push('/');, porém quando clico para enviar recebo um erro

"TypeError: Cannot read property 'push' of undefined"

Detalhado:

inserir a descrição da imagem aqui

Código:

import React, { useState } from 'react';
import { 
    Row, 
    Col, 
    TextInput, 
    Textarea, 
    Button, 
    Icon 
} from 'react-materialize';

import CardEmpresas from './CardEmpresas';

export default function NovaEmpresa({ history }) {
  const [nomeEmpresa, setNomeEmpresa] = useState('')
  const [endereco, setEndereco] = useState('')
  const [descricao, setDescricao] = useState('')

  function handleSubmit(event) {
    event.preventDefault();
    console.log({nome: nomeEmpresa, endereco, descricao});
    history.push('/');
  }



  return (
    <Row>
      <Col s={6}>
        <h3>Nova Empresa</h3>
        <form className="col s12" onSubmit={handleSubmit}>
          <Col s={12} >
            <TextInput
              s={12}
              type="text"
              value={nomeEmpresa}
              label="Nome da Empresa"
              onChange={event => setNomeEmpresa(event.target.value)}
            />
          </Col>

          <Col s={12} >
            <TextInput
              s={12}
              type="text"
              value={endereco}
              label="Endereço da Empresa"
              onChange={event => setEndereco(event.target.value)}
            />
          </Col>

          <Col s={12} >
            <Textarea
              s={12}
              type="text"
              value={descricao}
              label="Descrição da Empresa"
              onChange={event => setDescricao(event.target.value)}
            />
          </Col>

          <Button type="submit" waves="light">
            Submit
            <Icon right>
              send
            </Icon>
          </Button>

        </form>
      </Col>
      <Col s={6}>
        <CardEmpresas
          s={12}
          title={nomeEmpresa}
          descricao={descricao}
          endereco={endereco}
        />
      </Col>

    </Row>
  )
}
2
  • 7
    Onde você importou o history? Você precisa importá-lo do react-router e conectá-lo no componente que vai usá-lo: medium.com/desenvolvimento-com-react/… Commented 19/11/2019 às 13:49
  • 1
    Mostre o seu componente que vai ser executado primeiro, geralmente é nele que é configurado a parte de rotas.
    – novic
    Commented 20/11/2019 às 13:24

4 Respostas 4

1

Solução usada: fiz a importação do useHistory no react-router-dom e criei uma constante "history" passando "useHistory();", e funcionou.

    import { useHistory } from "react-router-dom";

    export default function NovaEmpresa(props) {
      const history = useHistory();

dai pude usar na função para redirecionar para a pagina desejada

history.push('/');

Seria legal ver outras possíveis soluções

1
1

Você pode definir uma função e chama-la em um botão conforme abaixo

onHomePress = () => {
    const { history } = this.props;
    history.push("/");
};

render() {

const { history } = this.props;

return (

<Container>

<Button
   onClick={() => this.onHomePress()}
/>
   {'Continuar'}
</Button>

</Container>
);

};
0

Olá,

Olhando o seu código, fica mais claro que você ainda não fez o import do hook useHistory. Você pode fazer as seguintes adições no seu código pra então usar o hook:

  1. Importe o Hook da biblioeta 'react-router-dom':

    import {useHistory} from 'react-router-dom'

  2. declare uma constante chamada history, atribuindo a função que você acabou de importar:

    const history = useHistory()

  3. E finalmente você pode usá-lo para fazer o seu redirecionamento:

    history.push('/pathname')

Claro, nestes três passos eu presumi que você instalou a biblioteca do react router dom, usando yarn ou npm. Caso não tenha feito, instale pelo gerenciados de pacotes NPM ou YARN, utilizando o comando: npm install 'react-router-dom', ou yarn add 'react-router-dom'. Logo após a instalação, você precisa fazer mais imports, dessa vez no index.js do react app.

-1

Aprendendo React Avançado:

/** em seu app default declare */
import React from 'react';
/**  instale ou no ndes ou yarn ADD todo Componentes do react-router-dom */
import { BrowserRouter, Router } from 'react-router-dom';
/**  crie uma pasta routes para importar as funcçoes e listas das rotas */
import MainRouter from './routes';
/** se quiser fazer pelo front-end crie o servico local com listas */
/** e importe aqui */
// import history from './services/history';
/**  use um css para as classes glogais de layout */
import GlobalStyles from './styles/GlobalStyles';

/** File App.js */
/** =========== */
function App() {
  return (
    <>
      <GlobalStyles />
      <BrowserRouter>
        <Router history={history}>
          <MainRouter />
        </Router>
      </BrowserRouter>
    </>
  )
}

export default App

/** File index.js */
/** ============= */

//** importe o React */
import React from 'react';
/**  importe ReactDOM */
import ReactDOM from 'react-dom';
/** importe App.js */
import App from './App';
//* Declere */
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)
/** na pasta routes  */
/** criando index.js */
//** importe o React */
import React from 'react';
//** importe as bibliotecas necessárias do React-Router-Dom */
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
//** importe as Listas de rotas da pasta routers */
import { routeList } from '../routes/routeList';
/** função de leitura dae Rotas e sub-rotas */
function RouteWithSubRoutes(route) {
  const logged = false;
  function BuildRoute(p) {
    const { component: Component, layout: Layout, privated } = p;
    if (!logged && privated) return <Redirect to="/login" />
    return (
      <Layout>
        <Component {...p} />
      </Layout>
    )
  }
  return (
    <Route
      exact={!!route.exact}
      path={route.path}
      render={prop => <BuildRoute {...prop} {...route} />}
    />
  )
}

export default function MainRouter() {
  const routes = [...routeList];
  return (
    <BrowserRouter>
      <Switch>
        {routes.map((route, i) => {
          const key = `route-${i}`
          return <RouteWithSubRoutes key={key} {...route} />
        })}
      </Switch>
    </BrowserRouter>
  )
}

/** criando função e chamando da Root em lista: */
/** Layout dos Componentes Paginas principal */
import { LayoutApp } from '../Pages/layouts/LayoutApp';
/** Layout dos Componentes Paginas Filhas do principal */
import { LayoutPages } from '../Pages/layouts/LayoutPages';
/** Paginas do Component chando as paginas filhas do Principal */
import { PageHome } from '../Pages/Home';

export const homeRoutes = [
  {
    exact: true,
    label: 'Home',
    path: '/',
    component: PageHome,
    layout: LayoutApp
  }
]
/** (nova lista de rotas ) */

export const routeList = [...(quantas listas tiver), ...homeRoutes]
/**
* usando uma page e retornando para home :
*/
//** importe o React */
import React from 'react';
/** importando useHistory do react-router-dom */
import { useHistory } from 'react-router-dom';
/** importando imagem da path image com nome fantasia */ 
import home from './home.svg';

/** Obs.o useHistory só funcina se antes for declarado no inicio as Roots*/

export const Minha_Page = () => {
  const { push } = useHistory();
  return (
    <Button img={home} onClick={() => push('/')} />
    )
}

Espero ter esclarecido de uma forma mais facil possível....

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 17/01/2022 às 20:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .