Can't figure out how to redirect to home page

Question

I just started watching some guide on youtube how to make simple fronend in React with bootstrap. I'm stuck for hours on one step since on react-router-dom v6 I can't use history anymore and as I'm using React class comp, I don't know how to implement "useNavigate" to my code. Thing that I want to do is when I add new book to go back to home page which is "/books". Here is my code:

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import BookService from '../services/BookService';


class CreateBookComponent extends Component {
    constructor(props){
        super(props)

        this.state={
            bookName: "",
            authorName: ""
        }

        this.changeBookNameHandler = this.changeBookNameHandler.bind(this);
        this.changeAuthorNameHandler = this.changeAuthorNameHandler.bind(this);
        this.saveBook = this.saveBook.bind(this);
        
    }

    changeBookNameHandler = (event) => {
        this.setState({bookName: event.target.value});
    }

    changeAuthorNameHandler = (event) => {
        this.setState({authorName: event.target.value});
    }

    saveBook = (e) => {
        e.preventDefault();
        
        let book = {bookName: this.state.bookName, authorName: this.state.authorName};
        console.log('book => ' + JSON.stringify(book));
        BookService.createBook(book).then(res => {
            **here is where did guy in guide called this.props.history.push('books');**
        });
    }
    
    render() {
        return (
            <div>
                <div className='container mt-2'>
                    <div className='row'>
                        <div className='card col-md-6 offset-md-3 offset-md-3'>
                            <h1 className='text-center'>Add Book</h1>
                            <div className='card-body'>
                                <form>
                                    <div className='form-group'>
                                        <label> Book Name</label>
                                        <input placeholder='Book Name' name='bookName' className='form-control'
                                            value={this.state.bookName} onChange={this.changeBookNameHandler}/>
                                    </div>
                                    <div className='form-group mt-2'>
                                        <label> Author Name</label>
                                        <input placeholder='Author Name' name='authorName' className='form-control'
                                            value={this.state.authorName} onChange={this.changeAuthorNameHandler}/>
                                    </div>
                                    <button className='btn btn-success mt-2' onClick={this.saveBook}>Save</button>
                                    <Link to="/books" className="btn btn-danger mt-2" style={{marginLeft: '10px'}}>Cancel</Link>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default CreateBookComponent;

Answer 1

You can try this:

saveBook = (e) => {
    e.preventDefault();
        
    let book = {bookName: this.state.bookName, authorName: this.state.authorName};
    console.log('book => ' + JSON.stringify(book));
    BookService.createBook(book).then(res => {
        window.location.href = "youWebsiteUrl" + "/books"
    });
}