时间戳

首页 > 解决方案 > React js：反应路由器不重定向

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

问题描述

我是新手学习反应，我不确定为什么这不能正常工作。当我按“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>
    );
}

标签： reactjsredirectreact-router

解决方案

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

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

推荐阅读