使用反应路由器切换到结果组件“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 之上； 因为如果要从 a 树中访问历史记录，则需要将其包裹在 Router 中，否则它将返回 undefined 作为 history 的值

这是working codesandbox