Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Provide a way to hook on routing start/end

Open
#102 8 comments 13 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
typescript
Domain
frontend, web-dev

Research direction

Start by tracing the routing transaction and existing useLocation hooks to identify when route changes become observable relative to DOM updates. Define and validate a hook that can compare the old and new routes before the transition renders, with tests confirming that enter and exit animation props can be selected at routing start.

Written by the indexing model from the issue text.

Description

enhancement

When using, for example solid-transition-group to implement enter/exit transitions on route changes, e.g.,

...
    <Transition {transitionProps}>
        <Routes />
    </Transition>
...

it is useful to use a different set of transitionProps for the enter and the exit animations. The exact set of props can be determined by comparing the old route to the new one (for example, going from master to detail usually involves an enter transition, while going back an exit one) and currently there is no way to do that. For example useLocation() and other hooks trigger after the routing transaction has ended: to late to change in any way the props passed to <Transition> or to inlfuence the DOM changes or CSS animations.

I think that implementing an hook that triggers at the start of the routing transaction would be extremely useful to help synchronize DOM animations with route changes.

Dominant language
TypeScript
Stars
1.3k
Forks
180
Avg merge
1d 13h
Merged PRs (30d)
19

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from solidjs/solid-router

All issues in solidjs/solid-router

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.