Home
Support Forums

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.

2 Likes

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.

2 Likes

Hey I seem to be having a similar issue. Where did you place your replace.js file within your project structure?

Hi, Aarati!

I placed the js file here: static/js/replace.js

Sorry to hear you’re having the same issue. Let me know if you ever find a better fix. :slight_smile:

2 Likes

Thank you!! It works for now. So many hours of trying to figure this out :sob: thank you so much for this workaround! I’ve asked in a few different places so if I find anything I’ll post it here!

1 Like

Awesome! Happy it worked for you. :grinning:

gatsby-starter-netlify-cms uses gatsby-plugin-netlify to configure _redirects and automatically add redirects to client only paths. To turn off this behavior set generateMatchPathRewrites: false.

1 Like

Hi,I am facing the same issue but i am not using gatsby.Any other solution to fix this?

Hi there, glad you found us :wave: before we can help you, we need a little more information on the issues you are facing.

Please tell us:

  • the name of your build instance: “example-jones.netlify.com
  • the issue you are encountering
  • what debugging steps you have already taken
  • any error messages you have received in your terminal window or in the developer console