Three React Router v4 Recipes I Inherit With Old Codebases

// RRv4 puts the router API on props (not on context, not on a hook). To
// navigate from a callback, you need access to props.history, which means
// the component is inside a Route render or wrapped in withRouter. The
// withRouter HOC injects { history, match, location } into ownProps.

// Stand-in router. Real RRv4 ships a BrowserHistory backed by the History API.
function createRouter(initialPath) {
    let path = initialPath || '/';
    const listeners = [];
    return {
        history: {
            push: (to, state) => {
                path = to;
                listeners.forEach((l) => l({ pathname: to, state, action: 'PUSH' }));
            },
            replace: (to, state) => {
                path = to;
                listeners.forEach((l) => l({ pathname: to, state, action: 'REPLACE' }));
            },
            goBack: () => listeners.forEach((l) => l({ pathname: path, action: 'POP' })),
            listen: (cb) => { listeners.push(cb); return () => { const i = listeners.indexOf(cb); if (i >= 0) listeners.splice(i, 1); }; },
        },
        location: { get pathname() { return path; } },
        match: { params: {}, path: '/' },
    };
}

function withRouter(Wrapped, router) {
    return function WithRouter(ownProps) {
        const merged = Object.assign({}, ownProps, {
            history: router.history,
            location: router.location,
            match: router.match,
        });
        return Wrapped(merged);
    };
}

// A consumer that needs to navigate from a button click.
function LoginForm(props) {
    return {
        type: 'form',
        props: {
            onSubmit: (event) => {
                if (event && event.preventDefault) event.preventDefault();
                // Here is the whole point: imperative navigation from inside the handler.
                props.history.push('/dashboard', { from: 'login' });
            },
        },
        children: ['login form. clicked? ' + (props.history ? 'yes' : 'no')],
    };
}

const router = createRouter('/login');
const RoutedLogin = withRouter(LoginForm, router);

const events = [];
router.history.listen((evt) => events.push(evt));

const form = RoutedLogin({});
console.log('initial render:', form.children[0]);
console.log('current pathname:', router.location.pathname);
form.props.onSubmit({ preventDefault: () => {} });
console.log('after submit, pathname:', router.location.pathname);
console.log('history events:', events);

// goBack uses the same history reference. Useful for cancel buttons.
router.history.replace('/dashboard/settings');
router.history.goBack();
console.log('all events:', events.map((e) => e.action + '->' + e.pathname));

// RRv4 dropped query parsing in v4 "to keep the bundle small". The intended
// replacement is URLSearchParams or the qs library. The recipe is a tiny
// helper that takes location.search and returns a typed object, plus the
// inverse to write a query back. Both are five lines each.

// Helpers. Real apps usually park these in a routing utils file.
function parseQuery(search) {
    if (!search) return {};
    const out = {};
    const params = new URLSearchParams(search.charAt(0) === '?' ? search.slice(1) : search);
    for (const [key, value] of params) {
        // Multi-value (?tag=a&tag=b) collapses into an array; single values stay scalar.
        if (key in out) {
            const existing = out[key];
            out[key] = Array.isArray(existing) ? existing.concat(value) : [existing, value];
        } else {
            out[key] = value;
        }
    }
    return out;
}

function stringifyQuery(obj) {
    const params = new URLSearchParams();
    for (const key of Object.keys(obj)) {
        const value = obj[key];
        if (value == null) continue;
        if (Array.isArray(value)) value.forEach((v) => params.append(key, String(v)));
        else params.set(key, String(value));
    }
    const out = params.toString();
    return out ? '?' + out : '';
}

// Walk through. Imagine props.location.search arriving on a search results page.
const search = '?q=react+hooks&page=2&tag=useEffect&tag=useReducer';
const parsed = parseQuery(search);
console.log('parsed:', parsed);
console.log('q ->', parsed.q);
console.log('page ->', parsed.page, '(string! coerce to Number on read)');
console.log('tag ->', parsed.tag, '(array because tag appeared twice)');

// Round trip.
const nextSearch = stringifyQuery(Object.assign({}, parsed, { page: '3' }));
console.log('next search:', nextSearch);
const rebuilt = parseQuery(nextSearch);
console.log('rebuilt:', rebuilt);

// The withRouter integration. mapState-style projection of search params.
function useQuery(props) {
    return parseQuery(props.location && props.location.search);
}

// Stand-in props.location for demo.
const props = { location: { search: '?q=cats&sort=likes' } };
console.log('hook-shaped extract:', useQuery(props));

// Gotcha: every value is a string. Build a coerce step at the read site so
// the rest of your app does not pass strings around as numbers and break.
function coerceSearchPage(props) {
    const q = parseQuery(props.location.search);
    return {
        query: q.q || '',
        page: Number(q.page) || 1,
        tags: Array.isArray(q.tag) ? q.tag : (q.tag ? [q.tag] : []),
    };
}
console.log('typed page slice:', coerceSearchPage({ location: { search } }));

// The recipe nobody mentions until you need it: imports outside the React
// tree (a saga, an axios interceptor, a third-party SDK callback) cannot get
// at history via withRouter. The fix is to create a single browser history
// instance and import it from anywhere. <Router> consumes the same instance,
// so push() from the saga and from a connected component drive the same UI.

// In real RRv4 this is `import createHistory from 'history/createBrowserHistory'`.
// We sketch the shape here so the snippet runs.
function createBrowserHistory(initialPath) {
    let path = initialPath || '/';
    const listeners = [];
    return {
        get location() { return { pathname: path, search: '', state: this._state || null }; },
        push: function (to, state) {
            path = to;
            this._state = state || null;
            listeners.forEach((l) => l({ pathname: to, action: 'PUSH', state }));
        },
        replace: function (to, state) {
            path = to;
            this._state = state || null;
            listeners.forEach((l) => l({ pathname: to, action: 'REPLACE', state }));
        },
        listen: function (cb) {
            listeners.push(cb);
            return function () { const i = listeners.indexOf(cb); if (i >= 0) listeners.splice(i, 1); };
        },
    };
}

// File: src/history.js (the singleton)
const history = createBrowserHistory('/');

// File: src/api.js (axios-style interceptor that redirects on 401)
function makeApiClient(httpStub) {
    return {
        request: function (config) {
            return httpStub(config).catch((err) => {
                if (err && err.status === 401) {
                    history.push('/login', { from: config.url });
                }
                throw err;
            });
        },
    };
}

// File: src/saga.js (saga that navigates after a successful action)
function onCheckoutComplete(orderId) {
    history.push('/orders/' + orderId, { fromCheckout: true });
}

// File: src/index.js (<Router history={history}> consumes the same singleton)
// In real code: <Router history={history}><App /></Router>
// Here we just listen so we can verify the events.
const seenEvents = [];
history.listen((evt) => seenEvents.push(evt));

// Drive both code paths. The router would be re-rendering in response to each.
const api = makeApiClient((cfg) => Promise.reject({ status: 401, url: cfg.url }));
api.request({ url: '/users/me' }).catch(() => {});

setTimeout(() => {
    onCheckoutComplete('A-1738');
    setTimeout(() => {
        console.log('all events seen by the router:');
        seenEvents.forEach((e) => console.log('  -', e.action, e.pathname, JSON.stringify(e.state)));
        console.log('current location:', history.location);
    }, 5);
}, 5);