當我嘗試使用時，我收到錯誤訊息（“函式作為 React 子項無效。如果您回傳一個組件而不是從渲染中回傳，則可能會發生這種情況。或者您可能打算呼叫此函式而不是回傳它。”）包含導航到“/path”的條件（查看代碼中的陳述句）。
return (
<>
<Router>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand to="/">MoviesReviews</Navbar.Brand>
<Nav className="me-auto">
<Link to="/picks">Picks</Link>
<Link to="/critics">Critics</Link>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
id = "SearchBox"
/>
{redirect === true? (() => (<Navigate to = "/search"/>)) : null}
<Button variant="outline-success" onClick = {() => pressSearch()}>Search</Button>
</Form>
</Container>
</Navbar>
<Routes>
<Route path = "/" element = {<Reviews/>}/>
<Route exact path = "/picks" element = {<Reviews/>}/>
<Route exact path = "/critics" element = {<Critics/>}/>
<Route exact path = "/search" element = {<SearchReviews search = {searchString}/>}/>
</Routes>
</Router>
</>
);
如果您查看“/search”的 Route 確切路徑，您會發現我實際上正在回傳一個<Component/>. 我很確定問題出在包含條件 ( {redirect === true? (() => (<Navigate to = "/search"/>)) : null}) 的行中。
uj5u.com熱心網友回復：
{redirect === true? (() => (<Navigate to = "/search"/>)) : null}通過上述宣告，您：
false如果您回傳 null 。true以防你試圖渲染一個函式。
() => (<Navigate to = "/search"/>)
因此，它作為反應兒童無效。
你必須這樣做：{redirect === true ? <Navigate to="/search"/> : null}如評論中所述。
uj5u.com熱心網友回復：
函式不是有效的 JSX，它們不能被渲染。
如果您有條件地渲染 React 組件，您可以使用幾種語法，但都不涉及使用函式。將布爾變數與真/假進行比較被認為是不好的做法，只需將變數的值用于條件即可。如果您只需要測驗一個值的真/假，請使用!!將其強制為嚴格的布林值。
使用三元：
condition ? <Component1 /> : null{redirect ? <Navigate to="/search" replace /> : null}如果您需要有條件地渲染兩個不同組件之一，或者將 null 作為組件結果回傳，這將很有用。
使用邏輯 AND (
&&)：condition && <Component1 />{redirect && <Navigate to="/search" replace />}如果您只需要有條件地渲染單個組件，這將非常有用。
如果您有條件地渲染整個組件渲染結果，那么您應該使用第一個以便將 null 作為有效的 JSX 回傳。
建議
最好發出命令式重定向而不是設定任何redirect狀態。這樣做的好處是不需要額外的 React 渲染周期來實作更改。
為了讓這個組件使用任何react-router-dom鉤子，Router將需要在 ReactTree 中移動到更高的位置，即到父組件或該組件的更高位置。
例子：
import { useNavigate } from 'react-router-dom';
...
const Component = () => {
const navigate = useNavigate();
...
// logic to replace setting any `redirect` state
if (<condition to redirect>) {
navigate("/search", { replace: true });
}
...
return (
<>
<Navbar bg="dark" variant="dark">
<Container>
<Navbar.Brand to="/">MoviesReviews</Navbar.Brand>
<Nav className="me-auto">
<Link to="/picks">Picks</Link>
<Link to="/critics">Critics</Link>
</Nav>
<Form className="d-flex">
<FormControl
type="search"
placeholder="Search"
className="me-2"
aria-label="Search"
id = "SearchBox"
/>
<Button
variant="outline-success"
onClick={pressSearch}
>
Search
</Button>
</Form>
</Container>
</Navbar>
<Routes>
<Route path="/" element={<Reviews />} />
<Route path="/picks" element={<Reviews />} />
<Route path="/critics" element={<Critics />} />
<Route path="/search" element={<SearchReviews search={searchString} />} />
</Routes>
</>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/491462.html
標籤：javascript 反应 反应路由器dom