无法弄清楚如何重定向到主页

Question

我刚刚开始在 youtube 上观看一些指南，了解如何使用 bootstrap 在 React 中制作简单的前端。自从在 react-router-dom v6 上，我在一个步骤上停留了几个小时，我不能再使用历史记录了，因为我正在使用 React class comp，我不知道如何实现“useNavigate”到我的代码。我想做的是当我添加新书以返回主页“/books”时。这是我的代码：

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

你可以试试这个：

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

无法弄清楚如何重定向到主页

Can't figure out how to redirect to home page

javascript

reactjs

react-bootstrap