Перейти к результатам. Компонент `onSubmit` - форма поиска в ответных хуках с использованием реагирующего маршрутизатора

Question

Привет У меня есть сценарий, в котором я помещаю панель поиска на верхнюю панель навигации, чтобы пользователь мог искать из любого места в приложении. Как мне перейти к компоненту результатов, как только пользователь отправит форму поиска? Вот мой компонент поиска, который заполняет глобальное состояние результатами поиска, но мне не удается переключить представление на компонент результатов.

import React, { useState, useEffect, useContext } from 'react';
import axios from 'axios';
import { StateContext } from '../../StateContext';

import './SearchBar.scss';

import sprite from '../../assets/icons/sprite.svg';

function SearchBar() {
    const [state, setState] = useContext(StateContext);
    const [userInput, setUserInput] = useState('');
    const [bookName, setBookName] = useState('');

    useEffect(() => {
        axios
            .get(`https://www.googleapis.com/books/v1/volumes?q=${bookName}`)
            .then((res) => {
                let book_list = res.data.items;
                setState({
                    book_list: book_list,
                    heading: 'Search Results'
                });
            })
            .catch((err) => console.log(err));
    }, [bookName]);

    const findBook = (e) => {
        e.preventDefault();
        setBookName(userInput);
    };

    const onChange = (e) => {
        setUserInput(e.target.value);
    };
    return (
        <form className='searchbar' onSubmit={findBook}>
            <input
                type='search'
                className='searchbar__input'
                placeholder='Search for a book'
                value={userInput}
                onChange={onChange}
            />
            <button className='searchbar__button'>
                <svg className='searchbar__icon'>
                    <use xlinkHref={`${sprite}#icon-search`} />
                </svg>
            </button>
        </form>
    );
}

export default SearchBar;

Вот как я управляю маршрутизацией:

import React from 'react';

import Nav from './components/Nav/Nav';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Books from './containers/Books';

import Book from './containers/Book';

import { ContextController } from './StateContext';

function App() {
    return (
        <ContextController>
            <Router>
                <div className='app'>
                    <Nav />
                    <main>
                        <Switch>
                            <Route exact path='/' component={Books} />
                            <Route exact path='/book/:id' component={Book} />
                        </Switch>
                    </main>
                </div>
            </Router>
        </ContextController>
    );
}

export default App;

Answer 1

Если у вас есть выделенный маршрут для результатов поиска, попробуйте это в вашем ContextController

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

// later

const history = useHistory();

React.useEffect(() => {
  if (state?.book_list?.length > 0) {
    history.push('/search-results');
  }
}, [state]);

Кроме того, важно отметить, что Router должен быть поверх вашего Data Context ; Потому что, если вы хотите получить доступ к истории из дерева, его нужно обернуть в Router, иначе он вернет неопределенное значение в качестве значения для history

Здесь работает codesandbox