Category: React

Sometimes, we want to mock the useHistory hook in Jest.

In this article, we’ll look at how to mock the useHistory hook in Jest.

How to mock the useHistory hook in Jest?

To mock the useHistory hook in Jest, we can call jest.mock with a function to return the return value of useHistory.

For instance, we write

jest.mock("react-router-dom", () => ({
  useHistory: () => ({
    push: jest.fn(),
  }),
}));

to call jest.mock to mock the react-router-dom module and a callback.

In the callback, we return an object that has the useHistory property set to a function that returns the object we want.

We mock the push method by setting it to jest.fn.

Conclusion

To mock the useHistory hook in Jest, we can call jest.mock with a function to return the return value of useHistory.

Sometimes, we want to add nested routes with React Router v5.

In this article, we’ll look at how to add nested routes with React Router v5.

How to add nested routes with React Router v5?

To add nested routes with React Router v5, we can add Route components in a Switch component.

For instance, we write

const PrivateRoutes = () => {
  return (
    <>
      <Header />
      <Switch>
        <Route path="/home" component={HomePage} />
        <Route path="/dashboard" component={DashboardPage} />
        <Route path="*" component={NotFoundPage} />
      </Switch>
      <Footer />
    </>
  );
};

const AuthRoutes = () => {
  return (
    <>
      <Header />
      <Switch>
        <Route path="/login" component={LoginPage} />
        <Route path="/sign-up" component={SignUpPage} />
        <Route path="*" component={NotFoundPage} />
      </Switch>
      <Footer />
    </>
  );
};

const App = () => {
  const history = createBrowserHistory();

  return (
    <div className="App">
      <Router history={history}>
        {isLoggedIn ? <PrivateRoutes /> : <AuthRoutes />}
      </Router>
    </div>
  );
};

to add the PrivateRoutes and AuthRoues components.

They both have Switch components wrapped around Route components.

In App, we render PrivateRoutes or AuthRoutes depending on the value of isLoggedIn.

Conclusion

To add nested routes with React Router v5, we can add Route components in a Switch component.

To fix ‘Error: useRoutes() may be used only in the context of a router component’ with React Router v6, we should call useRoutes in the component that’s use to render the route components.

For instance, we write

import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useRoutes,
} from "react-router-dom";

const Component1 = () => {
  return <h1>foo</h1>;
};

const Component2 = () => {
  return <h1>bar</h1>;
};

const App = () => {
  const routes = useRoutes([
    { path: "/", element: <Component1 /> },
    { path: "component2", element: <Component2 /> },
    // ...
  ]);
  return routes;
};

const AppWrapper = () => {
  return (
    <Router>
      <App />
    </Router>
  );
};

export default AppWrapper;

to create the App component that calls the useRoutes hook with an array of route items.

Each item has the path that we go to to render the element.

And we render the routes by returning the routes object returned by useRoutes.

And then we put App inside Router to let us use React Router for navigation.

Sometimes, we want to fix the "React-router TypeError: _this.props.history is undefined" error with React Router.

In this article, we’ll look at how to fix the "React-router TypeError: _this.props.history is undefined" error with React Router.

How to fix the "React-router TypeError: _this.props.history is undefined" error with React Router?

To fix the "React-router TypeError: _this.props.history is undefined" error with React Router, we wrap our route components with the BrowserRouter component.

For instance, we write

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import { BrowserRouter, Route } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <Route path="/" component={App} />
  </BrowserRouter>,
  document.getElementById("root")
);

to wrap BrowserRouter around the Router we have to make this.props.history available in App.

We should also call withRouter with App before exporting App to inject other React Router properties as props into App.

Conclusion

To fix the "React-router TypeError: _this.props.history is undefined" error with React Router, we wrap our route components with the BrowserRouter component.

To check history previous location before goBack() with React Router v4, we can save the pathname from the previous location in the Link‘s to prop’s state property.

For instance, we write

<Link
  to={{ pathname: "/graph/1", state: { from: this.props.location.pathname } }}
/>;

to set the state to the value of the current URL before we click on the Link by setting state to { from: this.props.location.pathname }.

We can do the same with history.push by writing

history.push({
  pathname: "/graph/1",
  state: {
    from: this.props.location.pathname,
  },
});

this.props.location.pathname has the URL path of the current page.