CODEWITHSUNDEEP
reactjsreact-router-v4
Rami
Rami

Reputation: 520

How to remove trailing / on root route with react-router

I have several routes:

 www.example.com/rootRoute/flags
 www.example.com/rootRoute/test
 www.example.com/rootRoute/derp

For the route home page I would like my route to be:

 www.example.com/rootRoute

but react-router is forcing a / at the end so my root route is:

 www.example.com/rootRoute/

Any idea how to fix this?

 "react-router": "^4.3.1",
 "react-router-dom": "^4.3.1",

I've already set the path within my switch and route to the desired path but a / is always appended within the address bar.

 <Switch>
  <Route path={'/rootRoute/flags'} component={FeatureFlagsPage} />
  <Route path={'/rootRoute/test'} component={DerpComponent} />
  <Route path={'/rootRoute'} component={TestComponent} />

I expect there to be no / at the end of the root route.

Upvotes: 0

Views: 4284

Answers (4)

Alex Oat
Alex Oat

Reputation: 121

I was able to get rid of trailing slashes in URLs by adding a <Redirect />:

  <Switch>

    // put this rule before your Routes
    <Redirect from="/:url*(/+)" to={window.location.pathname.slice(0, -1)} />

    // and your Routes go here...

  </Switch>

Upvotes: 1

Wylliam Judd
Wylliam Judd

Reputation: 10895

You can add a basename to the Router, like this:

<Router basename='/rootRoute'>
  <Switch>
    <Route exact path='/' component={ TestComponent }/>
    <Route path='/flags' component={ FeatureFlagsPage }/>
    <Route path='/test' component={ DerpComponent }/>
  </Switch>
</Router>

Upvotes: 0

Rami
Rami

Reputation: 520

I ended up using history.replaceState('', 'State Title', 'Root Path');

in my index component.

Upvotes: 0

SakoBu
SakoBu

Reputation: 4011

A few minor changes:

Move /rootRoute to the top and add exact to it. Get rid of the curly braces...

<Switch>
  <Route exact path='/rootRoute' component={TestComponent} />
  <Route path='/rootRoute/flags' component={FeatureFlagsPage} />
  <Route path='/rootRoute/test' component={DerpComponent} />
</Switch>

Upvotes: 1

Related Questions