How to match 404 page?

[icd2k3]

How to match 404 page?

[icd2k3]

Hey @Sven65,

Currently this isn't supported, but it probably should be! I'll look into implementing this in the near future...

[icd2k3]

This turned out to be easier than I originally thought (pretty sure this PR above will cover it... at least all the tests are passing). If you have time to check it out, an extra set of 👀never hurts!

[Sven65]

I'll check it out tomorrow, thanks!

[Sven65]

Alright, I had a look at it and I found some issues.

Using the demo shown here, I get these breadcrumbs:

Route	Breadcrumb
/applications/:id	Home / Applications / Edit Application
/applications	Home / 404
/admin	Home / 404
/admin/apps	Home / Admin / 404
/admin/apps/:id	Home / Admin / Apps / 404
/privacy	Home / 404
/terms	Home / 404

import withBreadcrumbs from 'react-router-breadcrumbs-hoc'

import React from 'react'

import { Link } from 'react-router-dom'


const breadcrumbRoutes = [
	{ path: '/applications/:id', breadcrumb: 'Edit Application' },
	{ path: '/admin/apps/:id', breadcrumb: 'Edit Application' },
	{ path: '/privacy', breadcrumb: 'Privacy Policy' },
	{ path: '/terms', breadcrumb: 'Terms of Service' },
]

const BreadcrumbDemo = ({
	breadcrumbs,
}) => (
	<div>
		{
			breadcrumbs.map(crumb => (
				<span key={crumb.key}>
					<Link to={crumb.props.match.url}>
						{ crumb.props.children }
					</Link>
				</span>
			))
		}
	</div>
)

export default withBreadcrumbs(breadcrumbRoutes, {
	routeNotFoundBreadcrumb: '404',
})(BreadcrumbDemo)

As for my routes, these are the ones I have.

<Switch>
	<Route path="/" exact component={Home} />
	<Route path="/oauth" component={OAuth} />
	<Route path="/applications" component={Dash} />
	<Route path="/applications/:id" exact component={Dash} />
	<Route path="/docs" component={Docs} />
	<Route path="(/privacy|/terms)" exact component={Legal} />
	<Route path="/admin(|/|/apps|/users)" exact component={Admin} />
	<Route path="/admin/apps/:id" exact component={Admin} />
	<Route component={Page404} />
</Switch>

[icd2k3]

Thanks for having a look!

Arg, yea, seems like this is a bit more complex than I originally thought... Back to the drawing board! In the meantime, there might be some way to leverage withRouter (not sure if it knows about 404 routes or not 🤔).

[icd2k3]

Alright, did some more investigating... The main problem is this HOC is unaware of the routes you might have set upstream, so determining which routes are 404 doesn't seem possible from the HOC AFAIK (if someone does know of a way, please let me know!)

This is a bit hacky, but if I were to solve this use-case without a change to this HOC I would probably do it through a css class:

Breadcrumbs.jsx

<div>
  {
    breadcrumbs.map(crumb => (
      <span key={crumb.key}>
        <Link to={crumb.props.match.url}>
          { crumb.props.children }
        </Link>
      </span>
    ))
  }
  <span className="route-not-found-breadcrumb">404</span>
</div>

Page404.jsx

// ...
  componentDidMount() {
    body.classList.add('is-404');
  }
 componentWillUnmount() {
    body.classList.remove('is-404');
  }
// ...

Breadcrumbs.css

.route-not-found-breadcrumb { display: none; }
body.is-404 .route-not-found-breadcrumb { display: inline-block; }

If anyone has ideas about how to support this functionality in this HOC, I'm all ears! Again, the main issue is that I don't see a good way of checking which routes the user has defined upstream.

[icd2k3]

Closing this because it is over a year old, and has a workaround documented.