React js：反应路由器不重定向

Question

我是新手学习反应，我不确定为什么这不能正常工作。 当我按“Enter”时，我想重定向到 /search，但由于某种原因它不起作用。 重定向到不同页面的正确方法是什么？

function App(){

    const [inputVal, setInputVal] = useState('');
    const [submitted, setSubmitted] = useState(false);

    function handleInput(e) {
        const query = e.target.value;
        setInputVal(query);
    }

    function handleKeyDown(e) {
        if (e.key === 'Enter') {
            setSubmitted(true);
            console.log(submitted);
            console.log(inputVal);
        }
    }

    return (
        <div className='App'>
            <div>
                <h1>Movie</h1>
                <input
                    onKeyDown={handleKeyDown}
                    onChange={handleInput}
                    placeholder='Search...'
                />
            </div>

            <Router>
                <Switch>
                    <Route path='/' exact component={Home} />
                    {submitted && <Redirect to='/search' />}
                    <Route path='/search' component={Search} />
                    <Route path='/details/:id' component={Detail} />
                </Switch>
            </Router>
        </div>
    );
}

Answer 1

我建议使用历史记录以编程方式导航到搜索。您可能希望将 inputVal 作为查询参数传递，以便您可以在该组件中访问它。

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

function App() {
    const history = useHistory();
    const [inputVal, setInputVal] = useState('');

    function handleInput(e) {
        const query = e.target.value;
        setInputVal(query);
    }

    function handleKeyDown(e) {
        if (e.key === 'Enter') {
            // You can put the inputVal as a query parameter
            history.push(`/search?search=${inputVal}`);
        }
    }

    return (
        <div className="App">
            <div>
                <h1>Movie</h1>
                <input
                    onKeyDown={handleKeyDown}
                    onChange={handleInput}
                    placeholder="Search..."
                />
            </div>

            <Router>
                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/search" component={Search} />
                    <Route path="/details/:id" component={Detail} />
                </Switch>
            </Router>
        </div>
    );
}

Answer 2

它总是选择你的开关中的第一个，所以因为你在主页上，它可能永远不会看到下面的任何东西，这就是它不会重定向你的原因。您要么需要将重定向放在主路由上方，要么尝试使用 react-router 中的“历史”功能，这需要您在根级别设置它才能使用，但您可以这样做

function handleKeyDown(e) {
    if (e.key === 'Enter') {
        history.push('/search')
        console.log(submitted);
        console.log(inputVal);
    }
}