How do I use history.push in a react functional component? - reactjs

Question

So im very new to programming with react and im struggling to redirect to a new page after hitting a button. Im working with react-hook-froms.
import Button from '#material-ui/core/Button';
import CssBaseline from '#material-ui/core/CssBaseline';
import TextField from '#material-ui/core/TextField';
import Typography from '#material-ui/core/Typography';
import { makeStyles } from '#material-ui/core/styles';
import Container from '#material-ui/core/Container';
import { useForm } from 'react-hook-form'
import BoardService from '../service/BoardService';
import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(40),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function BoardName() {
useEffect(() => {
console.log("useEffect");
})
const [id, getId] = useState(1);
const history = useHistory();
const classes = useStyles();
const {register, handleSubmit} = useForm();
const onSubmit = (data) => {
let board = {
id: id,
name: data.boardName
}
console.log(board);
BoardService.createBoard(board.name, board);
history.push(`createboard/created`);
}
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Typography component="h1" variant="h5">
Name des Boards
</Typography>
<form className={classes.form} onSubmit={handleSubmit(onSubmit)} noValidate >
<TextField
variant="outlined"
margin="normal"
inputRef={register}
required
fullWidth
id="boardName"
label="Name"
name="boardName"
autoFocus
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
</form>
</div>
</Container>
);
}
the history.push isn't working in the onSubmit function and in the browser i keep getting the error: Unhandled Rejection (TypeError): Cannot read property 'push' of undefined.
I'm really stuck and not getting further. I'm happy for any help or advice. Thank you.

Answer 1

wrap your main index file with BrowserRouter using react-router-dom package
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
it should work.