How to remove hashtag on url

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
syahirdev
Posts: 1
Joined: 04 May 2021, 18:50

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'

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

05 May 2021, 16:13

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,

yampan
Posts: 6
Joined: 09 Oct 2022, 16:26

29 Nov 2022, 06:17

Would it be easier to use BrowserRouter instead of HashRouter to remove the # in the URL?

habubey
Posts: 89
Joined: 24 Aug 2022, 13:17

29 Nov 2022, 09:58

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
Bugra Beyduz
PrimeReact Core Developer
Github profile: https://github.com/habubey

yampan
Posts: 6
Joined: 09 Oct 2022, 16:26

01 Dec 2022, 17:20

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

habubey
Posts: 89
Joined: 24 Aug 2022, 13:17

02 Dec 2022, 11:19

Hey again!
Thank you for your example
Best
Bugra Beyduz
PrimeReact Core Developer
Github profile: https://github.com/habubey

Annyjones01
Posts: 1
Joined: 17 Mar 2023, 10:37
Location: USA
Contact:

10 May 2023, 11:06

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.

Post Reply

Return to “Diamond - PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest