• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

282
Vistas
Cómo eliminar la barra inclinada final en las URL del enrutador de reacción

Comienzo a usar react-router en mi aplicación y observo que cuando tiene una barra inclinada al final de la URL ( /url/ ) no funciona. Busqué más al respecto, leí toda la documentación y los problemas del enrutador de reacción e intenté usar <Redirect from='/*/' to="/*" /> , sin embargo, no fue una buena solución, porque tampoco funcionó . Entonces, leyendo más, descubrí una sugerencia para insertar /? al final de la URL, pero aún no funcionó.

El código de rutas.js:

 export default ( <Route path="/" component={App}> <IndexRoute component={ProfileFillComponents} /> <Route path="/seguro-residencia" handler={require('./components/Forms/Residencial/ProfileFill/profileFillComponents')} /> <Route path="/seguro-residencia/informacoes-pessoais" component={CotationNumber} /> </Route> )

El código de index.js:

 render((<Router history={browserHistory} routes={routes} />), document.getElementById('root'));

Buscando más, encontré a un tipo que hizo una función para forzar la barra inclinada en las URL y resolví hacer lo contrario, obligando a no tenerla.

Actualice el código de route.js con la función Sin función de barra diagonal:

 export default ( <Route onEnter={forceTrailingSlash} onChange={forceTrailingSlashOnChange}> <Route path="/" component={App}> <IndexRoute component={ProfileFillComponents} /> <Route path="/seguro-residencia" handler={require('./components/Forms/Residencial/ProfileFill/profileFillComponents')} /> <Route path="/seguro-residencia/informacoes-pessoais" component={CotationNumber} /> </Route> </Route> ) function forceNoTrailingSlash(nextState, replace) { const path = nextState.location.pathname; if (path.slice(-1) === '/') { replace({ ...nextState.location, pathname: path.slice(1,path.lastIndexOf('/')-1) }); } } function forceNoTrailingSlashOnChange(prevState, nextState, replace) { forceNoTrailingSlash(nextState, replace); }

¡Y de nuevo esto no funcionó! Necesito hacer que estas URL sean lo más amigables posible y me gustaría que las URL no tengan ninguna barra inclinada al final. ¿Alguna sugerencia de cómo puedo hacer esto? ¿Y por qué Redirect no funcionó en este caso?

about 3 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

Encontré una buena opción para hacer esta redirección. A continuación se muestra el código que estoy usando:

 app.use(function(req, res, next) { if (req.path.length > 1 && /\/$/.test(req.path)) { var query = req.url.slice(req.path.length) res.redirect(301, req.path.slice(0, -1) + query) } else { next() } });

La explicación es básicamente ella:

  1. En esta función, verifico si la URL es grandiosa y luego si tiene una barra diagonal.
  2. Si es cierto, obtengo esta URL sin la barra inclinada final y realizo una redirección 301 a esta página sin la barra inclinada final.
  3. De lo contrario, salto al siguiente método para enviar un valor.
about 3 years ago · Santiago Trujillo Denunciar

0

Solución React Router v6

EliminarTrailingSlash.tsx

 import React from "react"; import {Navigate, useLocation} from "react-router-dom"; export const RemoveTrailingSlash = ({...rest}) => { const location = useLocation() // If the last character of the url is '/' if (location.pathname.match('/.*/$')) { return <Navigate replace {...rest} to={{ pathname: location.pathname.replace(/\/+$/, ""), search: location.search }}/> } else return null }

AppRoutes.tsx

 const AppRoutes: React.FC = () => { return ( <React.Fragment> <RemoveTrailingSlash/> <Routes> {/* All your routes go here */} </Routes> </React.Fragment> ) }
about 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda