Category: React Answers

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.

Sometimes, we want to make React Bootstrap Navbar and React Router work together.

In this article, we’ll look at how to make React Bootstrap Navbar and React Router work together.

How to make React Bootstrap Navbar and React Router work together?

To make React Bootstrap Navbar and React Router work together, we can add the as prop to the Nav.Link component.

For instance, we write

<Nav defaultActiveKey="/bills" as="ul">
  <Nav.Item as="li">
    <Nav.Link as={NavLink} to="/bills">
      Bills
    </Nav.Link>
  </Nav.Item>
  <Nav.Item as="li">
    <Nav.Link as={NavLink} to="/other">
      Other
    </Nav.Link>
  </Nav.Item>
</Nav>

to render Nav.Libk as a React Router NavLink by setting the as prop to NavLink.

The to prop takes a URL path string just like the React Router to prop.

Conclusion

To make React Bootstrap Navbar and React Router work together, we can add the as prop to the Nav.Link component.