foo.js

const onlyNumbers = (nextState, redirect) => {
  if (isNotNumber(nextState.params)) {
    redirect({
      ...nextState.location,
      state: { notFound: true }
    })
  }
}

<Route component={App}>
  <Route path="/users/:id" onEnter={onlyNumbers}/>
</Route>


const User = React.createClass({
  componentDidMount() {
    fetchTheUser(this.props.params.userId, (req) => {
      if (req.status === 404) {
        browserHistory.replace({
          ...this.props.location,
          state: { notFound: true }
        })
      }
    })
  }
})

const App = React.createClass({
  render() {
    return (
      <div>
        {this.props.location.state.notFound ? (
          <NotFound/>
        ) : (
          this.props.children
        )}
      </div>
    )
  }
})

As of https://gist.github.com/ryanflorence/a311ca980c0d8a5d33eab50f29621f12/97a91053452012e6a5a7362b76af85f150e7715c, the isNotNumber example here is an infinite redirect loop. The <User> example does not work for server-side rendering, and leads to suboptimal UX by first loading the route, then 404ing.