Redirects work but change url in browser

I’m having a very similar issue.

I’ve tried creating proxy redirects both via a _redirects file and via the netlify.toml file, and in both cases the pages redirect successfully but not without modifying the URL in the browser.

hey adam, i split this topic off so we can address this individually.

do you have a live site URL you can share with us?

1 Like

Hi, Perry!

Netlify URL: https://hungry-jones-49a5af.netlify.app/
Live URL: https://www.collegeessayhub.com/

The current _redirects file has examples of the two types of redirects I’m trying to do:

https://www.siteone.com https://www.sitetwo.com/specificpage 200!
/seethis /dontseethis 200!

They both redirect successfully, but change the URL in the browser.

Hi, @PromptAdam, the URL is being changed by the site javascript. Both the URLs do return 200 responses.

You can test this as well with the NoScript browser plugin. It disables javascript until you grant permissions based on the origin domain name for the javascript URL.

When I used NoScript the URL does not change in the address bar. When I enable javascript, only then does the URL change.

To summarize, the URL is being modified by the site javascript. This is not something Netlify is doing or can control. If you don’t want the address bar to change, you’ll need to modify your javascript to no longer do so.

​Please let us know if there are any other questions about this.

1 Like

Thanks, Luke! At least I know we have our redirects config set up properly. :slight_smile:

We’re using the Gatsby + Netlify CMS Starter template, with no custom JS. I’ll try connecting with the template maintainers.

Leaving this here in case anyone else runs into this issue.

1 Like

I was unable to find a true fix for this issue, but I have a workaround for now.

I wrote a script called replace.js:

window.onload = () => {
	window.history.replaceState({}, '', '/')
}

And then, at the root of the project, in gatsby-ssr.js:

import React from 'react'
import { withPrefix } from 'gatsby'

export const onRenderBody = ({ setPostBodyComponents }) => {
	setPostBodyComponents([
		<script src={withPrefix('js/replace.js')} key="replaceURL" />
	])
}

export const onPreRenderHTML = ({ getPostBodyComponents, replacePostBodyComponents }) => {
	let postBodyComponents = getPostBodyComponents()
	postBodyComponents.sort((a, b) => {
		if (a.key === 'replaceURL') {
			return 1
		}
		if (b.key === 'replaceURL') {
			return -1
		}
		return 0
	})
	replacePostBodyComponents(postBodyComponents)
}

This has the effect of loading whatever page I’m trying to load, and then removing the path after the top-level domain. It’s not exactly what I was hoping for, since it’s not a true rewrite and you briefly see the entire URL, but it works for now.

1 Like