Unable to access current route name in component

Since this.props.url is deprecated, we can no longer access the route’s name through the props of the component.

If you append the name of the current route through server.js, it will stop working during client-side routing.

Inspecting the Router object shows that the ‘name’ of the route is not being appended anywhere, hence the withRouter solution described in the deprecated page fails too.

[shift-keshav-pudaruth]

Solution

We extend our _app.js file and inject the url props to allow it to work as before:

import React from 'react';
import Routes from '../routes';

class MyApp extends App {
    static async getInitialProps ({ Component, ctx }) {
        let pageProps = {};

        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps(ctx);
            pageProps.url = Routes.match(ctx.asPath);
        }

        return {pageProps}
    }

    render () {
        const {Component, pageProps} = this.props;
        return (
            <Container>
                        <Component {...pageProps} />
            </Container>
        )
    }
}

Then access the url props directly in your pages. Name of the route will be found at this.props.url.route.name.

Hopefully, this solution will solve a few headaches. Been stuck on this one for the past hour.

[fridays]

Totally! I’m short on time at the moment but review asap. Thanks for contributing!