Make trailing slash optional #820
Comments
|
For me, the desired behavior would be
So I don't think changing the default behavior is the ideal solution. But it would be nice to have some more control over this. |
mjackson
changed the title
|
+1 |
1 similar comment
|
+1 |
|
+1 |
|
This is really an important issue. However, since the issue hasn’t been resolved, what is the workaround? |
|
+1 |
1 similar comment
|
+1 |
|
Yep, very annoying issue. Path must be handled with and without trailing slash by default as it is not classic REST router. |
|
@ryanflorence @mjackson will this be addressed/changed in #1158? Does it make sense to implement it on the current code base, or should I rather start based on the code in #1158 ? |
|
@dignifiedquire This is already fixed in #1158 |
|
@mjackson how to solve this issue now? |
|
its now optional in 1.0 |
|
workaround for this in |
|
@kevzettler add |
+1 |
|
|
|
It is not working in Link component. Class "active" is not added in case of trailing slash. In the method Router#isActive are compared wrong strings: which in my case of using |
|
Hi guys! Can't you just redirect every path with trailing slash to the path without it on server (using |
|
@th0r yes I ended up with unification of all routes |
|
(On 1.0.0-rc3) This is strange, but when using If I do this (a slash after Then if I open a new window and go to To fix this, I had to remove the trailing slash from the root component: I wanted to write a failing test but couldn't figure out how: If someone could help me write a failing test, I'd create a new issue. |
|
Just don't specify the trailing slash on |
|
For anyone wondering about how to do this in express: // remove trailing slashes
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()
}
}) |
|
any update on this feature? |
|
I found a solution that worked for me Source: |
|
@Frikki: Old, I know, but I saw this somewhere. This will force all routes to end in a slash. |
|
I'd love what @cmmartti worked, but it is causing an infinite loop for unknown paths as far as I understand. |
|
I'm using react-router v2 and was able to force trailing slashes using The technique relies on the fact that you can wrap all existing My <Router history={browserHistory}>
{/* ↓ This route hooks up the magic, all else can be replaced with your own routes */}
<Route onEnter={forceTrailingSlash} onChange={forceTrailingSlashOnChange}>
<Route path="/" component={MainLayout}>
<IndexRoute component={Dashboard} />
...other routes
</Route>
</Route>
</Router>
function forceTrailingSlash(nextState, replace) {
const path = nextState.location.pathname;
if (path.slice(-1) !== '/') {
replace({
...nextState.location,
pathname: path + '/'
});
}
}
function forceTrailingSlashOnChange(prevState, nextState, replace) {
forceTrailingSlash(nextState, replace);
} |
|
Is there a solution for optional trailing slashes for v4? (sorry for notification spam - deleted the first comment by accident) |
|
Simple <Route path='/admin(/)' component={App}> |
|
@pugnascotia From my understanding of the v4 design, the approach I described would still apply with light refactoring:
@cristianele That's not a DRY solution for multiple routes. Also, isn't it good practice to support only a single URL for a given page of content? You're making a trailing slash optional for users, but also allowing two equivalent URLs for each route with that treatment. |
|
For those of who are interested in forcing a trailing slash on specific routes: This is nice if a user goes directly to |
|
Following up on @lewisdiamond's solution (using 4.1.x specifically), I believe enforcing trailing slashes for all routes can be achieved by making the following the first route in your router: <Route path="/:url*" exact strict render={props => <Redirect to={`${props.location.pathname}/`}/>}/>
Sample root component: render() {
return <Provider store={this.props.store}>
<Router history={this.props.history}>
<Switch>
<Route exact strict path="/:url*" render={props => <Redirect to={`${props.location.pathname}/`}/>} />
<Route exact path="/login" component={Login} />
<Route exact path="/logout" component={Logout} />
<Route path="/" component={MarketingSection} />
<Route path="/Subsection" component={SomeSubsectionComponent} />
<Route component={FourOhFour} />
</Switch>
</Router>
</Provider>
}This change shouldn't require modifying routes anywhere else in an app as long as no routes strictly required no trailing slash (those would now be broken). I was able to drop this redirect into an existing app that was both defined as in the example above and exclusively used slashless internal links. Everything just worked with one exception: At one route in particular, there was some bad url join logic that assumed there'd be no trailing slash in the path and it only worked correctly in that case (meaning that the accessing that route with a trailing slash was broken before my change anyway). Be on the lookout for fun stuff like Note that non-matching routes of the form |
and others
Desired behavior:
makePathI think this behavior is pretty standard.
Today (as of v0.12.9)
makePathappends a trailing slash if a trailing slash is optionally allowed.Food for thought (tangential): It would be nice to support optional trailing slashes automatically without the need to add a
/?to all routes.The text was updated successfully, but these errors were encountered: