React: change url without rerender; using window.history?

Question

I have a "settings" page in my react app. The page has several tabs rendering different parts of settings.

It would be better UX if a user can share urls with other users.

What I want is (inside "settings" page):

user A clicks a tab
url changes with a #tabname appended
user A send that url to user B, and user B open that url
user B sees the same tab as user A

But with react router, the whole page re-renders if the url changed:

import { withRouter } from "react-router-dom"

const MyComp = (props) => {
  ...

  const onTabChange = () => {
    // append #tabname here
    props.history.replace(...); // or `push`
    ...
  }

  ...

export default withRouter(MyComp)
}

After a lot of searches, I found a solution to use window.history:

  const onTabChange = () => {
    window.history.pushState(null, null, "#tabname");
    ...
  }

This does the trick, but little information and explanation, and I'd love to know the consequences of using this trick.

Is this a valid solution (for a react app)? Will this cause any problem?

(PS. I know how to parse a url)

More details:

To be more specific, there is a AuthChecker wrapper for all pages. When react router's location changes, it checks for the route's allowed auths and current user's auth.

I've tried /path/:id and everything but all change location, so auth checked and page rerendered.

And I've given up a solution in react router and just want to know: is it safe to change url with window.history in a react app using react router to manage routes?

Does this answer your question? URL change without re rendering in React router — idmean
– idmean, Commented Jan 26, 2021 at 9:01

DevAddict · Accepted Answer · 2021-01-26 09:47:41Z

1

this question is already answerd at this post.

so it says window has a property called history and there is a method on history which helps you update the history state without react-router-dom understanding it.

like this:

window.history.replaceState(null, 'New Page Title', '/new_url');

answered Jan 26, 2021 at 9:47

DevAddict

2,0751 gold badge12 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: change url without rerender; using window.history?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related