Add useRouter hook for React 16.7+ #6453

mjackson · 2018-11-03T01:09:56Z

Still experimental, but no reason we shouldn't be able to have a useRouter hook that works exactly like a path-less <Route>.

~~Please don't merge until React 16.7 is out of alpha!~~ Actually, let's do what @Janpot suggested and release this in 4.x as unstable_useRouter.

See #6430

Still experimental, but no reason we shouldn't be able to have a useRouter hook that works exactly like a path-less <Route>. See #6430

packages/react-router/modules/useRouter.js

packages/react-router/modules/__tests__/useRouter-test.js

danielkcz · 2018-11-03T09:12:05Z

@mjackson Can't we have this released under some next dist-tag? Honestly, I don't see a point in having this PR here for another month or two without being able to use it. It's not a breaking change, it's purely additive and if someone uses it a wrong way, they get slapped.

Co-Authored-By: mjackson <[email protected]>

Janpot · 2018-11-03T16:53:39Z

or name it unstable_useRouter until 16.7 is released. Analog to how react prereleases experimental features.

mjackson · 2018-11-03T17:26:42Z

That's a great idea, @Janpot. Let's do that.

packages/react-router/modules/useRouter.js

danielkcz · 2018-11-06T17:28:40Z

@mjackson

That's a great idea, @Janpot. Let's do that.

Are you actually waiting for someone else to do that?

mjackson · 2018-11-07T02:24:21Z

@FredyC No, I already did 8e2cd23

danielkcz · 2018-11-07T04:44:38Z

@mjackson Well, there are some other valid comments above, so I am just wondering what's the holdup. If you are busy, I am sure someone can finish this, but I think it's important to let us know.

danielkcz · 2018-11-13T10:52:18Z

packages/react-router/modules/__tests__/useRouter-test.js

@@ -0,0 +1,34 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { MemoryRouter, Route, useRouter } from "react-router";


To fix tests failing :)

Suggested change

import { MemoryRouter, Route, useRouter } from "react-router";

import { MemoryRouter, Route, unstable_useRouter as useRouter } from "react-router";

@mjackson Is it really that hard to change this and release it? :) Looks like you are deliberately waiting for React 16.7 to come out and stalling :)

Please be patient, @FredyC. Thanks :)

edygar · 2018-11-20T19:32:47Z

packages/react-router/modules/useRouter.js

+  let context = useContext(RouterContext);
+  let location = options.location || context.location;
+  let match = options.path
+    ? matchPath(location.pathname, options)


You could useMemo here like:

let match = options.path ? useMemo(() => matchPath(location.pathname, options), [ location.pathname, options.path, options.exact, options.strict ]) : context.match;

So it won't loop through all routes at matchPath on every usage that route remains unchanged after a render.

I have a feeling that at the moment the useMemo came to the light, people are trying to memoize everything :) Bear in mind, that even such memoization has some overhead and without proper benchmarks, it's just a speculation what would be more performant.

Oh and also a conditional use of hook is a big NO-NO, so I really wouldn't do this.

Ops! I'm really getting used to it.

And you're right, it looks like premature optimization for now.

jadbox · 2018-12-24T04:39:10Z

Any update on the status of the PR?

danielkcz · 2018-12-28T15:30:56Z

@jadbox Sadly not, @mjackson is asking for patience for almost two months already and I am really not sure why is it such a problem to get this totally safe change released. Would love to at least hear some explanation if it's waiting on something or what :/

Wezea · 2019-01-25T07:00:24Z

Would be great to get this merged, as hooks gonna be released soon.

facebook/react#14679

HaNdTriX · 2019-02-06T11:45:26Z

Hooks are stable now. https://github.com/facebook/react/releases/tag/v16.8.0

danielkcz · 2019-02-06T17:32:42Z

I think we should just make a new fresh PR. This one needs updating anyway and @mjackson seems busy discovering hooks world 😄

https://twitter.com/mjackson/status/1092503452301684736

panjiesw · 2019-02-06T17:37:48Z

Seems like v5, built entirely with hooks, is already under consideration :)

ianstormtaylor · 2019-02-15T00:46:36Z

@mjackson could we get this one released?

This would be really useful to avoid render props for matching active state only. Thanks!

NullVoxPopuli · 2019-02-18T16:38:27Z

how do we use this from git?
tried:

    "react-router": "github:reacttraining/react-router#8e2cd2380136e5781d012a2478635ab2ffb76e1b",

with yarn,
but:

error Can't add "react-router": invalid package version undefined.

which kiiiiinda makes sense, cause this is a monorepo.

danielkcz · 2019-02-18T16:55:18Z

@NullVoxPopuli I would kinda advise to copy & paste the code from this PR and use that instead. It's fairly simple functionality in a single file and later when it comes out officially, it should be easy to refactor.

I would only wish @mjackson would be more communicative regarding this 😕

flq · 2019-02-21T09:18:28Z

Before considering a full-on rewrite, I would just like to say that the useRouter - hook has great value in and of itself.

timurrustamov · 2019-02-26T16:49:39Z

packages/react-router/modules/useRouter.js

@@ -0,0 +1,20 @@
+import React, { useContext } from "react";


Maybe you should remove the unused default React symbol import ?

mdestagnol · 2019-03-05T00:51:04Z

Any update on this @mjackson ? Would be great to use hooks for new projects instead of HOC. Thx a lot for this great library by the way!

mjackson · 2019-03-19T21:57:24Z

We are planning to introduce some hooks soon, but I think useRouter may be too coarse. Instead, we're thinking:

useLocation() - gets you the current location object
useMatch(path) - gets you the match object for the given path
useParams() - gets you the current match.params

and possibly a few others. We are planning on pushing some of these soon in 5.x

sorahn · 2019-03-21T10:58:37Z

will useMatch, with no path, just give you closest match object? That would be super useful as you need match.path and match.url from the nearest match to build "relative" routes.

Add useRouter hook for React 16.7+

c2cf7a7

Still experimental, but no reason we shouldn't be able to have a useRouter hook that works exactly like a path-less <Route>. See #6430

donavon reviewed Nov 3, 2018

View reviewed changes

packages/react-router/modules/useRouter.js Show resolved Hide resolved

danielkcz reviewed Nov 3, 2018

View reviewed changes

packages/react-router/modules/__tests__/useRouter-test.js Outdated Show resolved Hide resolved

Update packages/react-router/modules/__tests__/useRouter-test.js

ef30940

Co-Authored-By: mjackson <[email protected]>

Use "unstable_" prefix to indicate status

8e2cd23

Jessidhia reviewed Nov 6, 2018

View reviewed changes

packages/react-router/modules/useRouter.js Show resolved Hide resolved

EloB reviewed Nov 6, 2018

View reviewed changes

packages/react-router/modules/useRouter.js Show resolved Hide resolved

remix-run deleted a comment from EloB Nov 6, 2018

danielkcz reviewed Nov 13, 2018

View reviewed changes

edygar reviewed Nov 20, 2018

View reviewed changes

danielkcz mentioned this pull request Feb 6, 2019

Add useRouter Hook #6430

Closed

hinok mentioned this pull request Feb 14, 2019

useHooks() hinok/react-router-last-location#9

Closed

timurrustamov reviewed Feb 26, 2019

View reviewed changes

mjackson closed this Mar 19, 2019

sorenlouv mentioned this pull request Mar 28, 2019

[APM] Drop Redux dependency elastic/kibana#34040

Closed

lock bot locked as resolved and limited conversation to collaborators May 21, 2019

timdorr deleted the use-router branch June 25, 2019 13:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add useRouter hook for React 16.7+ #6453

Add useRouter hook for React 16.7+ #6453

mjackson commented Nov 3, 2018 •

edited

Loading

danielkcz commented Nov 3, 2018 •

edited

Loading

Janpot commented Nov 3, 2018

mjackson commented Nov 3, 2018

danielkcz commented Nov 6, 2018

mjackson commented Nov 7, 2018

danielkcz commented Nov 7, 2018

danielkcz Nov 13, 2018

danielkcz Nov 20, 2018

mjackson Nov 21, 2018

edygar Nov 20, 2018 •

edited

Loading

danielkcz Nov 20, 2018

danielkcz Nov 20, 2018 •

edited

Loading

edygar Nov 20, 2018

jadbox commented Dec 24, 2018

danielkcz commented Dec 28, 2018 •

edited

Loading

Wezea commented Jan 25, 2019

HaNdTriX commented Feb 6, 2019

danielkcz commented Feb 6, 2019 •

edited

Loading

panjiesw commented Feb 6, 2019

ianstormtaylor commented Feb 15, 2019

NullVoxPopuli commented Feb 18, 2019 •

edited

Loading

danielkcz commented Feb 18, 2019

flq commented Feb 21, 2019

timurrustamov Feb 26, 2019

mdestagnol commented Mar 5, 2019

mjackson commented Mar 19, 2019

sorahn commented Mar 21, 2019

	import { MemoryRouter, Route, useRouter } from "react-router";
	import { MemoryRouter, Route, unstable_useRouter as useRouter } from "react-router";

Add useRouter hook for React 16.7+ #6453

Add useRouter hook for React 16.7+ #6453

Conversation

mjackson commented Nov 3, 2018 • edited Loading

danielkcz commented Nov 3, 2018 • edited Loading

Janpot commented Nov 3, 2018

mjackson commented Nov 3, 2018

danielkcz commented Nov 6, 2018

mjackson commented Nov 7, 2018

danielkcz commented Nov 7, 2018

danielkcz Nov 13, 2018

Choose a reason for hiding this comment

danielkcz Nov 20, 2018

Choose a reason for hiding this comment

mjackson Nov 21, 2018

Choose a reason for hiding this comment

edygar Nov 20, 2018 • edited Loading

Choose a reason for hiding this comment

danielkcz Nov 20, 2018

Choose a reason for hiding this comment

danielkcz Nov 20, 2018 • edited Loading

Choose a reason for hiding this comment

edygar Nov 20, 2018

Choose a reason for hiding this comment

jadbox commented Dec 24, 2018

danielkcz commented Dec 28, 2018 • edited Loading

Wezea commented Jan 25, 2019

HaNdTriX commented Feb 6, 2019

danielkcz commented Feb 6, 2019 • edited Loading

panjiesw commented Feb 6, 2019

ianstormtaylor commented Feb 15, 2019

NullVoxPopuli commented Feb 18, 2019 • edited Loading

danielkcz commented Feb 18, 2019

flq commented Feb 21, 2019

timurrustamov Feb 26, 2019

Choose a reason for hiding this comment

mdestagnol commented Mar 5, 2019

mjackson commented Mar 19, 2019

sorahn commented Mar 21, 2019

mjackson commented Nov 3, 2018 •

edited

Loading

danielkcz commented Nov 3, 2018 •

edited

Loading

edygar Nov 20, 2018 •

edited

Loading

danielkcz Nov 20, 2018 •

edited

Loading

danielkcz commented Dec 28, 2018 •

edited

Loading

danielkcz commented Feb 6, 2019 •

edited

Loading

NullVoxPopuli commented Feb 18, 2019 •

edited

Loading