CODEWITHSUNDEEP
reactjsreact-routerreact-router-dom
pgalle
pgalle

Reputation: 304

Remove trailling slash from base url in react router dom

I've got a React project using react-router-dom. I implemented Browserrouter there.

All urls have to look like http://localhost:8080/build/index.html?path=qmrelsr3pk2nnubhmb6iobj6ynr3ahiehuqa4

my basename in the BrowserRouter is /build/index.html

All links generated in the DOM have the correct structure. However if I click on one of the, it adds a trailling / behind the index.html. So I cannot refresh the page without a properly configured server.

How can I prevent the / from being added?

Kind regards.

Upvotes: 0

Views: 1851

Answers (2)

CodingYourLife
CodingYourLife

Reputation: 8588

I just do this:

<Redirect
    from='/:url*(/+)'
    to={window.location.pathname.slice(0, -1)}
/>

At the start of your <Router> or <Switch> component. It checks if there is a trailing slash and redirects to the page without the trailing slash.

I'm also not sure about best practice and respect the answer of @pgalle

Upvotes: 0

pgalle
pgalle

Reputation: 304

I hacked into the history.push like so:

history.pushState = ((f) => function pushState(){
  arguments[2] = arguments[2].replace('index.html/', 'index.html');
  const ret = f.apply(this, arguments);

  return ret;
})(history.pushState);

I'm sure this is not a best practice, but hey it works.

Upvotes: 1

Related Questions