在反应路由器dom中使用导航时，函数作为反应子错误无效

【问题标题】：Functions are not valid as react child Error while using Navigate in react router dom在反应路由器dom中使用导航时，函数作为反应子错误无效
【发布时间】：2022-06-15 22:55:36
【问题描述】：

当我在尝试使用包含 Navigate to "/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}) 的行中。

【问题讨论】：

• 是的，那条线就是问题所在。你的意思是{redirect === true ? <Navigate to="/search"/> : null}？

标签： javascript reactjs react-router-dom