Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Can't figure out how to redirect to home page

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;

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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"
    });
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading