我正在做一個專案。我想執行重定向到另一個頁面并傳遞引數的 onClick 方法。但是 Redirect 方法即使不傳遞引數也不起作用。有人可以看看我的代碼有什么問題嗎？
在我的 app.js 中，我有代碼來切換路由：
<Router>
<Switch>
<Route path= "/Home">
<Home/>
</Route>
<Route path= "/Projects">
<Projects/>
</Route>
<Route path= "/Results">
<Results/>
</Route>
</Switch>
</Router>
在我的組件中，我有：
function Search() {
const [searchTerm, setTerm] = useState("");
function handleChange(event) {
setTerm(event.target.value);
}
function handleClick(event) {
if (searchTerm.length > 0) {
return(
<Redirect
to={{
pathname: "/Results",
state: {searchTerm}
}}
/>
);
}
event.preventDefault();
}
return (
<div>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid justify-content-end">
<form class="d-flex">
<input onChange={handleChange} value={searchTerm} class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button onClick={handleClick} class="btn btn-outline-success">Search</button>
</form>
</div>
</nav>
</div>
);
}
uj5u.com熱心網友回復：
稍加改動，您的代碼就可以正常運行。
而不是使用Redirect組件（路由），您需要以history.push這種方式使用方法做一個簡單的更改路由：
import {useHistory} from 'react-router-dom';
function Search() {
const [searchTerm, setTerm] = useState("");
function handleChange(event) {
setTerm(event.target.value);
}
function handleClick(event) {
if (searchTerm.length > 0) {
history.push({
pathname: '/Results',
state: {searchTerm}
})
}
}
// rest of the codes ...
}
現在在你的<Results/>組件中，你可以使用這個狀態：
import {useLocation} from 'react-router-dom';
function Results () {
const location = useLocation();
useEffect(() => {
const searchTerm = location.state.searchTerm
console.log(searchTerm)
}, [])
// rest of the codes ...
}
uj5u.com熱心網友回復：
Redirect如果您通過呼叫函式回傳它，它將不起作用。如果你想/results使用頁面訪問Redirect你可以創建一個新狀態：
const [redirect, setRedirect] = useState(false);
并將此狀態設定為true如果輸入值滿足所需條件searchTerm.length > 0。然后，您可以使用條件呈現來添加Redirect到您的 return 陳述句
function handleClick() {
if (searchTerm.length > 0) {
setRedirect(true)
}
}
return (
<>
{redirect && (
<Redirect
to={{
pathname: "/Results"
}}
/>
)}
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<button onClick={handleClick}>Search</button>
</>
);
重定向的作業示例
第二種方法是使用 hook useHistory()：
const history = useHistory();
function handleClick() {
if (searchTerm.length > 0) {
history.push("/Results");
}
}
useHistory 示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/344531.html