Page 1 of 1

How to remove hashtag on url

Posted: 04 May 2021, 18:57
by syahirdev
Hello. I want to ask about the router used in the diamond template. How can I remove the hashtag '#' that attached into the url?
And if my router are like

Code: Select all

 '/animal/dog/:id' 
how can I make the breadcrumb shown at the AppTopBar to just show 'Dog'? currently it showing the full label like this

Code: Select all

'animal/dog/1'

Re: How to remove hashtag on url

Posted: 05 May 2021, 16:13
by mert.sincan
Hi,

This issue is related to react-router. I think you need to add browserHistory for it. Please examine this link;
https://stackoverflow.com/questions/351 ... act-router

Best Regards,

Re: How to remove hashtag on url

Posted: 29 Nov 2022, 06:17
by yampan
Would it be easier to use BrowserRouter instead of HashRouter to remove the # in the URL?

Re: How to remove hashtag on url

Posted: 29 Nov 2022, 09:58
by habubey
Hi there!

We are not having any issues while we changed from HashRouter to BrowserRouter. You can remove the # in the URL with BrowserRouter.

Thank you,
Best

Re: How to remove hashtag on url

Posted: 01 Dec 2022, 17:20
by yampan
syahirdev wrote:
04 May 2021, 18:57
Hello. I want to ask about the router used in the diamond template. How can I remove the hashtag '#' that attached into the url?
And if my router are like

Code: Select all

 '/animal/dog/:id' 
how can I make the breadcrumb shown at the AppTopBar to just show 'Dog'? currently it showing the full label like this

Code: Select all

'animal/dog/1'
I have a workaround, but it may not be what you what exactly. Nevertheless, it will look reasonable to the users.

In breadcrumb.js, change

Code: Select all

const label = props.meta.label;
return <>{location.pathname === '/' ? <span>Current Working</span> : <span>{label}</span>}</> 
to

Code: Select all

// using the replace function
const label = props.meta.label; 
return <>{location.pathname === '/' ? <span>Current Working</span> : <span>{label.replace(':id', '')}</span>}</> // expected output -> /animal/dog/
Then add a <h5>Producy ID: {id}</h5> in the component

Re: How to remove hashtag on url

Posted: 02 Dec 2022, 11:19
by habubey
Hey again!
Thank you for your example
Best

Re: How to remove hashtag on url

Posted: 10 May 2023, 11:06
by Annyjones01
To remove a hashtag from a URL, you can use JavaScript to manipulate the URL. Here's an example code snippet that demonstrates how to remove a hashtag from a URL:

// Get the current URL
let url = window.location.href;

// Check if the URL contains a hashtag
if (url.indexOf('#') !== -1) {
// Remove the hashtag and everything after it
url = url.substring(0, url.indexOf('#'));

// Replace the current URL with the modified URL
window.history.replaceState({}, document.title, url);
}
In this code snippet, we first get the current URL using window.location.href. We then check if the URL contains a hashtag by using the indexOf() method. If the URL contains a hashtag, we use the substring() method to remove the hashtag and everything after it. Finally, we use window.history.replaceState() to replace the current URL with the modified URL. This updates the URL in the address bar without reloading the page.