extended-salmon

Same url navigation behavior

Router method navigate checks parsed location's href with a previous and if they match navigation does not perform. Let's consider the example:

router.navigate({
  to: location.pathname,
  mask: {to: '/settings'},
  state: {id: 5},
});

router.navigate({
  to: location.pathname,
  mask: {to: '/settings'},
  state: {id: 5},
});

In this case we use mask and state attributes, that differs with previous route match, but href of next and previous matches are same => navigation does not happen. Is it expected behavior? I need to force navigation and I can achieve it with random search parameter, but may be more suitable approach exists?

25 Replies

extended-salmon•2y ago

GitHub

Router does not trigger loader or beforeLoad when navigating to...

Describe the bug Hi I have a search form view which contains some search options as html inputs and a search button. It works like this: I press "Search" button, which does nothing but pr...

extended-salmon•2y ago

@Tanner Linsley two questions: 1) why does router not navigate if going to the same location? is this some kind of optimization? 2) can we make this behavior configurable?

blank-aquamarine•2y ago

We can discuss this The standard behavior of HTML links that are the same is a no-op Granted, that's because they aren't using a JS router and there's nothing left to do with that action That said, in apps, clicking the same link of the URL you are on could easily have the intent of "refresh" What we really need to nail down is: - Are loaders rerunning? - Are we pushing/replacing anything in the history stack? (I say neither, just a no-op)

extended-salmonOP•2y ago

I agree with you, it's important design decision. But sometimes we need to break this rule. For example, multi-step forms/modals, when we want to hide from user possibility to direct step navigation bypassing the previous ones. Or route masking for modals like in twitter

blank-aquamarine•2y ago

Right. So what would you like to happen? I think running load and thus before load and loaders again is the right call

extended-salmonOP•2y ago

I need also history stack increment. So I suggest to add optional flag to force navigate if isSameUrl condition is thruly

blank-aquamarine•2y ago

So like, pushExact: true I could make that configurable at the router level too

extended-salmonOP•2y ago

You mean both places: ToOptions interface and RouterConstructorOptions type?

blank-aquamarine•2y ago

Yep It would be at the navigate and link levels, but yes.

extended-salmonOP•2y ago

I think it's good solution!

blank-aquamarine•2y ago

I’ll work on it

extended-salmon•2y ago

instead of a single Boolean, I suggest making it configurable in a fine grained way so one can for example configure "only run loaders but do not push onto the history stack"

blank-aquamarine•2y ago

Agreed. It’ll be an “enum” aka string

extended-salmonOP•2y ago

"replace" flag does not suit? Hi. Can you please tell me when we can expect this feature to be added? I just want to schedule refactoring in our project Alternatively, I can create a pull request with an implementation of this feature

extended-salmon•2y ago

sure go ahead let me know when it's ready to review

blank-aquamarine•2y ago

This feature may not be as straightforward to implement as you would expect The event flow from real navigations won’t work here since the watcher on the history is only updating the router when the actual href changes. The router has a commit location function internally that detects if a href is the same as what is currently in the state.

extended-salmon•2y ago

is this PR from you? https://github.com/TanStack/router/pull/1530

GitHub

Navigate on state change by JakeHedman · Pull Request #1530 · TanSt...

Don't skip navigation if replace is true or state has changed, even if the URL is unchanged.

blank-aquamarine•2y ago

I’m not entirely sure that will make loaders run again though. Could probably use some tests

extended-salmonOP•2y ago

no, I am busy on my work, pr is still draft I guess this change should be behind the flag

blank-aquamarine•2y ago

Try with the latest version

extended-salmonOP•2y ago

at latest version I have problems with examples, it is known issue?

extended-salmonOP•2y ago

also codesandbox https://tanstack.com/router/latest/docs/framework/react/examples/quickstart-file-based

React TanStack Router Quickstart File Based Example | TanStack Rout...

An example showing how to implement Quickstart File Based in React using TanStack Router.

extended-salmonOP•2y ago

It's an a draft still, I want to make examples and write tests https://github.com/TanStack/router/pull/1556

GitHub

Draft: Feat/same url navigation by rflban · Pull Request #1556 · Ta...

extended-salmonOP•2y ago

I see, I've merged this pr, but author does not consider case of masked routes Also my linter have changed code style and I've used new lock file , it's my fault, i'll fix this

extended-salmonOP•2y ago

I suggest to hide whitespace changes as temporary decision

Gaming

Programming

Same url navigation behavior

Did you find this page helpful?