Quiero validar los parámetros en mi componente y hacer una redirección si no pasan alguna lógica.
Dos cosas pueden salir mal:
Warning: Cannot update a component (`BrowserRouter`) while rendering a different component (`Home`).
You should call navigate() in a React.useEffect(), not when your component is first rendered.
No estoy seguro de entender por qué no puedo return null , o devolver cualquier elemento aleatorio de la lógica y aún así hacer que se redirija correctamente.
Entiendo que funciona con useEffect , pero en realidad quiero finalizar la ejecución de la representación de mi componente antes de tiempo, para evitar que se ejecute la lógica más abajo en el componente, en el caso de que los parámetros no estén formateados correctamente.
Vea los códigos y caja aquí (tiene que cambiar la URL para agregar un número de identificación): https://codesandbox.io/s/nostalgic-cloud-di0ovf
import "./styles.css";
import {
BrowserRouter,
Routes,
Route,
Link,
useNavigate,
useParams,
} from "react-router-dom";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/:id" element={<Home />} />
<Route path="/users" element={<Users />} />
</Routes>
</BrowserRouter>
);
}
function Users() {
return (
<div>
<nav>
<Link to="/1">Go To 1 (bad param)</Link>
</nav>
<h2>Users</h2>
</div>
);
}
function Home() {
const navigate = useNavigate();
const {id} = useParams();
// check for properly formed params
if( id < 3){
navigate({pathname:'/users', replace:true})
return <span>nothing</span>;
}
// other logic that depends on properly formed params
// don't run this with mal-formed params!
return (
<div>
<nav>
<Link to="/1">Go To 1 (bad param)</Link>
</nav>
<h1>Home: {id}</h1>
</div>
);
}
Debe dividir la lógica de emitir el efecto secundario intencional de navegar de la lógica de generar JSX válido.
Ejemplo:
function Home() {
const navigate = useNavigate();
const { id } = useParams();
useEffect(() => {
if (id < 3) {
navigate('/users', { replace: true });
}
}, [id, navigate]);
// check for properly formed params
if (id < 3) {
return <span>nothing</span>; // or null
}
// other logic that depends on properly formed params
// don't run this with mal-formed params!
return (
<div>
<nav>
<Link to="/1">Go To 1 (bad param)</Link>
</nav>
<h1>Home: {id}</h1>
</div>
);
}
Alternativamente, puede representar una redirección declarativa en su lugar.
Ejemplo:
function Home() {
const { id } = useParams();
// check for properly formed params
if (id < 3) {
return <Navigate to='/users' replace />;
}
// other logic that depends on properly formed params
// don't run this with mal-formed params!
return (
<div>
<nav>
<Link to="/1">Go To 1 (bad param)</Link>
</nav>
<h1>Home: {id}</h1>
</div>
);
}