React Router v4 Help

Okay, so I totally get where you’re coming from, and it can be super confusing at first! So, with React Router v4, there’s a bit of a shift in how history works compared to earlier versions.

First off, BrowserHistory isn’t actually a standalone thing that you just import from React Router v4. Instead, you work with the history object that’s automatically injected into your components. So if you’re getting ‘undefined’, that’s likely because you’re not pulling it in correctly.

Using withRouter is definitely the right approach! If you wrap your component with it, you should actually get access to the history prop. For example:

import React from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
    handleClick = () => {
        this.props.history.push('/new-route');
    }

    render() {
        return (
            Go to New Route
        );
    }
}

export default withRouter(MyComponent);

You should also consider the useHistory hook if you’re using functional components. Here’s how you can do it:

import React from 'react';
import { useHistory } from 'react-router-dom';

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

    const handleClick = () => {
        history.push('/new-route');
    }

    return (
        Go to New Route
    );
};

export default MyComponent;

Either of these should help you navigate without needing to mess around with BrowserHistory. Just make sure your component is receiving the props correctly or using the hooks. It can be a little bit of a learning curve, but once you get the hang of it, it’s much easier!

Hope this helps, and just keep experimenting! You’ll get it!