I start to use react-router in my application and I am noting that when it has a trailing slash at end of URL (/url/) it does not work. I searched more about it, read all documentation and react-router issues and tried to use <Redirect from='/*/' to="/*" />, however it was not a good solution, cause it did not work too. So, reading more I found out a suggestion to insert /?at end of URL, but it still not worked.
The code of routes.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>
)
The code of index.js:
render((<Router history={browserHistory} routes={routes} />), document.getElementById('root'));
Searching more, I found a guy who made a function to force trailing slash at URLs and I resolved to make the opposite of that, forcing to not have it.
Update routes.js code with function No trailing slash function:
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);
}
And again this did not work! I need to make this URLs more friendly as possible and I would like that URLs do not have any trailing slash at the end. Any suggestion how can I make this? And why Redirect did not work in this case?
I found a good option to make this redirect. Below is the code which I am using:
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()
}
});
The explanation is basicly it:
RemoveTrailingSlash.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>
)
}