404 not found for nesting routes in react router v4

Question

In my app, I have the routes

• /auth/login
• /auth/register

And the common parts in page are placed in Auth.jsx, use Router to /auth/login and /auth/regster

But /auth/login/xxx will also match /auth/login

The only solution to fix is to add exact, Switch and Error Route everywhere

Is any other solutions for this avoiding writing too many Error Routes?

Codes Following...

App.jsx

import React from 'react'
import { render } from 'react-dom'
import { Route, Switch } from 'react-router-dom'

import Error from './Error'
import Home from './Home/Home'
import Auth from './Auth/Auth'

export default class App extends React.Component {
  render () {
    return (
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/auth" component={Auth}/>
        <Route component={Error}/>
      </Switch>
    )
  }
}

Auth.jsx

import React from 'react'
import { render } from 'react-dom'
import { Route, Link } from 'react-router-dom'

import Login from './Login'
import Register from './Register'

export default class Auth extends React.Component {
  render () {
    return (
      <div>
        <div>Auth works</div>
        <div>
          <Link to={`${this.props.match.url}/login`}>LOGIN</Link>
          <Link to={`${this.props.match.url}/register`}>REGISTER</Link>
        </div>
        <Route exact path={`${this.props.match.url}/login`} component={Login}/>
        <Route exact path={`${this.props.match.url}/register`} component={Register}/>
      </div>
    );
  }
}