Recibo el error ("Las funciones no son válidas como elemento secundario de React. Esto puede suceder si devuelve un Componente en lugar de renderizar. O tal vez pretendía llamar a esta función en lugar de devolverla") cuando intento usar condición que incluye Navegar a "/ruta" (mire la declaración en el código).
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> </> ); Si observa la ruta exacta de la ruta para "/ buscar", verá que en realidad estoy devolviendo un <Component/> . Estoy bastante seguro de que el problema está en la línea que contiene la condición ( {redirect === true? (() => (<Navigate to = "/search"/>)) : null} ).
{redirect === true? (() => (<Navigate to = "/search"/>)) : null} con la declaración anterior usted:
false , está devolviendo nulo.true , está tratando de representar una función. () => (<Navigate to = "/search"/>)Por lo tanto, no es válido como un niño reactivo.
Tienes que hacer: {redirect === true ? <Navigate to="/search"/> : null} como se menciona en los comentarios.
Las funciones no son JSX válidas, no se pueden representar.
Si está renderizando condicionalmente componentes de React, hay un par de sintaxis que puede usar, ninguna implica el uso de una función. Se considera una mala práctica comparar variables booleanas con verdadero/falso, solo use el valor de la variable para la condición. Si solo necesita probar la veracidad/falsedad de un valor, ¡utilice !! forzarlo a un valor booleano estricto.
Usando un ternario: condition ? <Component1 /> : null
{redirect ? <Navigate to="/search" replace /> : null}Esto es útil si necesita renderizar condicionalmente uno de dos componentes diferentes, o devolver nulo como resultado de un componente.
Usando AND lógico ( && ): condition && <Component1 />
{redirect && <Navigate to="/search" replace />}Esto es útil si solo necesita renderizar condicionalmente un solo componente.
Si está procesando condicionalmente el resultado de procesamiento del componente completo, debe usar el primero para devolver un valor nulo como JSX válido.
Sería mejor emitir una redirección imperativa en lugar de establecer cualquier estado de redirect . Esto tiene la ventaja de no requerir un ciclo de renderizado de React adicional para efectuar el cambio.
Para que este componente use cualquier react-router-dom , el Router deberá moverse más arriba en ReactTree, es decir, al componente principal o más arriba de este componente.
Ejemplo:
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> </> ); };