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?
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:
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> ) }