Tengo una Ruta: /:question/:id
Lo que quiero es si pon /:questionName/:idnonsense , las tonterías se eliminan automáticamente.
Digamos /how_to_do_that/123 es una ruta disponible, si /how_to_do_that/123345345345 o /how_to_do_that/123awheofhawoeiha ingresado en la barra de direcciones, cambiará automáticamente a /how_to_do_that/123 . O si pongo /how_to_do_that/12 , lo repondrá a /how_to_do_that/123 . Y redirigir a /how_to_do_that/123
¿Cómo puedo hacer eso? Estoy usando Rutas en React. Intenté un día entero hacerlo....
Probé en youtube, sus rutas pueden hacer eso. Entonces, https://www.youtube.com/watch?v=1fPWr0d5zBE es un enlace disponible, si intenta visitar https://www.youtube.com/watch?v=1fPWr0d5zBEAHSOHOWIHFOH , se revisará a https:/ /www.youtube.com/watch?v=1fPWr0d5zBE y visite ese enlace en su lugar. Pero si intentas visitar https://www.youtube.com/watch?v=1fPWr0d5z , eso es un 404 (que creo que puede mejorarse haciendo coincidir la conjetura cercana).
¿Alguien sabe cómo hacer eso? Muchas gracias.
Bueno, su ejemplo de youtube no coincide con lo que está pidiendo en su pregunta (parámetros de ruta de ruta frente a parámetros de cadena de consulta), pero creo que la respuesta es la misma de cualquier manera. Desea validar un parámetro de ruta de ruta. Maneje esto en el componente con una expresión regular.
const regexp123 = /^123$/; console.log(regexp123.test("123345345345")); console.log(regexp123.test("123")); console.log(regexp123.test("12"));En el componente, la lógica podría verse así:
import { generatePath, useParams, useNaviate } from 'react-router-dom'; const regexp123 = /^123$/; const params = useParams(); const navigate = useNavigate(); useEffect(() => { const { id } = params; if (!regexp123.test(id)) { const target = generatePath( "/:question/:id", { ...params, id: '123', }, ); navigate(target, { replace: true }); } }, [navigate, params]); La esencia es que el componente necesita validar los parámetros de la ruta manualmente y manejarlos en consecuencia. Lo mismo para los parámetros queryString que usan el gancho useSearchParams .