Add useRouter Hook

Hi guys,

at current React Conf Hooks have been announced for React v16.7. What’s the plan for supporting them? Will there be a useRouter() any time soon?

https://reactjs.org/docs/hooks-faq.html#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router

[mjackson]

We’re not making any progress here, so I’m going to close this. We will have a few hooks in the next major release, maybe even in a minor release. If you absolutely cannot wait, please be my guest and use some other router that ships with hooks.

[third774]

You could also create your own wrapper to get access:

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";

export const RouterContext = React.createContext({});

const CustomBrowserRouter = ({ children }) => (
  <BrowserRouter>
    <Route>
      {(routeProps) => (
        <RouterContext.Provider value={routeProps}>
          {children}
        </RouterContext.Provider>
      )}
    </Route>
  </BrowserRouter>
);

export default CustomBrowserRouter;

Then wrap this around your App instead of the normal <BrowserRouter />

import React from "react";
import CustomBrowserRouter from "./CustomBrowserRouter";

function App() {
  return (
    <CustomBrowserRouter>
      <div className="App">
        {/* The rest of your app  */}
      </div>
    </CustomBrowserRouter>
  );
}

export default App;

Then you can make a useRouter hook:

import {useContext} from "react"
import {RouterContext} from "./CustomBrowserRouter"

export default function useRouter() {
  return useContext(RouterContext)
}