Category: React Answers

Sometimes, we want to programmatically navigate using React Router.

In this article, we’ll look at how to programmatically navigate using React Router.

How to programmatically navigate using React Router?

To programmatically navigate using React Router, we can use the history.push method.

For instance, we write

import {
  useHistory
} from "react-router-dom";

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

  const handleClick = () => {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      home
    </button>
  );
}

to call the useHistory to return the history object.

Then we call history.push with the URL we want to go to in handleClick to redirect to the URL.

Conclusion

To programmatically navigate using React Router, we can use the history.push method.

Sometimes, we want to fix React-router URLs don’t work when refreshing or writing manually.

In this article, we’ll look at how to fix React-router URLs don’t work when refreshing or writing manually.

How to fix React-router URLs don’t work when refreshing or writing manually?

To fix React-router URLs don’t work when refreshing or writing manually, we should make sure that we’re redirecting the React app URLs to index.html in our web server.

For instance, in Apache, we add the following to the .htaccess file.

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

We intercept all URLs with

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l

And then we redirect them to index.html with

RewriteRule . /index.html [L]

Conclusion

To fix React-router URLs don’t work when refreshing or writing manually, we should make sure that we’re redirecting the React app URLs to index.html in our web server.

Sometimes, we want to simulate a button click in Jest.

In this article, we’ll look at how to simulate a button click in Jest.

How to simulate a button click in Jest?

To simulate a button click in Jest, we can call the simulate method.

For instance, we write:

import React from 'react';
import {
  shallow
} from 'enzyme';
import Button from './Button';

describe('Test Button component', () => {
  it('Test click event', () => {
    const mockCallBack = jest.fn();

    const button = shallow(<Button onClick={mockCallBack}>Ok</Button>);
      button.find('button').simulate('click'); expect(mockCallBack.mock.calls.length).toEqual(1);
    });
  });
})

to call shallow to mount the Button component.

Then we call find with 'button' to find the button element.

And then we call simulate with 'click' to simulate a click on it.

Then we call expect to check that the mockCallBack has been called once by checking mockCallBack.mock.calls.length.

Conclusion

To simulate a button click in Jest, we can call the simulate method.