Category: React

Sometimes, we want to use Jest to test a Link from React Router v4.

In this article, we’ll look at how to use Jest to test a Link from React Router v4.

How to use Jest to test a Link from React Router v4?

To use Jest to test a Link from React Router v4, we can wrap our component with StaticRouter before we mount it.

For instance, we write

import React from "react";
import renderer from "react-test-renderer";
import { Link } from "react-router-dom";
import { StaticRouter } from "react-router";

test("Link matches snapshot", () => {
  const component = renderer.create(
    <StaticRouter location="someLocation" context={context}>
      <Link to="#" />
    </StaticRouter>
  );

  const tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

to wrap Link with StaticRouter before we call rendered.create.

Then we call component.toJSON to return the snapshot data.

And then we call expect and toMatchSnapshot` to check what’s rendered.

Conclusion

To use Jest to test a Link from React Router v4, we can wrap our component with StaticRouter before we mount it.

Sometimes, we want to fix this.props.history.push() not working with React Router v4.

In this article, we’ll look at how to fix this.props.history.push() not working with React Router v4.

How to fix this.props.history.push() not working with React Router v4?

To fix this.props.history.push() not working with React Router v4, we should we call withRouter with the component we’re calling this.props.history.push on to make the method available.

For instance, we write

import React, { Component } from "react";
import { withRouter } from "react-router";
// you can also import "withRouter" from 'react-router-dom';

class Example extends Component {
  render() {
    const { match, location, history } = this.props;
    return (
      <div>
        <div>You are now at {location.pathname}</div>
        <button onClick={() => history.push("/")}>{"Home"}</button>
      </div>
    );
  }
}

export default withRouter(Example);

to call withRouter with Example so that history is added to this.props.

We should also make sure Example is set as a component that’s rendered with Route‘s render prop.

Conclusion

To fix this.props.history.push() not working with React Router v4, we should we call withRouter with the component we’re calling this.props.history.push on to make the method available.

Sometimes, we want to pass object through Link in React Router,.

In this article, we’ll look at how to pass object through Link in React Router.

How to pass object through Link in React Router?

To pass object through Link in React Router, we can pass them as a query string.

For instance, we write

<Link
  to={{
    pathname: `/blog/${post.id}`,
    query: {
      title: post.title,
      content: post.content,
      comments: JSON.stringify(post.comments),
    },
  }}
>
  Read More...
</Link>;

to add a Link.

Then we set query to an object with the values we want in the query string.

The keys are the query parameters keys and the values are their values.

Then we can parse the comments from the query parameter with

JSON.parse(this.props.comments)

in the destination component.

Conclusion

To pass object through Link in React Router, we can pass them as a query string.

Sometimes, we want to reload a page with React Router.

In this article, we’ll look at how to reload a page with React Router.

How to reload a page with React Router?

To reload a page with React Router, we can call the history.go method with 0.

For instance, we write

import { useHistory } from "react-router";

const Comp = () => {
  const history = useHistory();

  const reload = () => {
    history.go(0);
  };
  //...
};

to call the useHistory hook in the Comp component.

And then in the reload function, we call history.go with 0 to reload the page.

Conclusion

To reload a page with React Router, we can call the history.go method with 0.

Sometimes, we want to add Link component from React Router with React Material UI tabs.

In this article, we’ll look at how to add Link component from React Router with React Material UI tabs.

How to add Link component from React Router with React Material UI tabs?

To add Link component from React Router with React Material UI tabs, we can set the containerElement prop of the Tab component.

For instance, we write

<Tabs onChange={this.changeTab} value={value}>
  <Tab value={0} label="first" containerElement={<Link to="/first" />} />
  <Tab value={1} label="second" containerElement={<Link to="/second" />} />
  <Tab value={2} label="third" containerElement={<Link to="/third" />} />
</Tabs>;

to set containerElement to render the Link component so that we can use the React Router Link component for navigation when we click on each tab.

Conclusion

To add Link component from React Router with React Material UI, we can set the containerElement prop of the Tab component.