ModalRouter.jsx

import React from 'react';
import {Switch, Link, Route, HashRouter} from 'react-router-dom';
import {Modal, Button} from 'react-bootstrap';

const UserModal = () => {
  return (
    <Modal.Dialog>
      <Modal.Header>
        <Modal.Title>
          <Switch>
            <Route exact path="/modal/register" component={RegisterTitle} />
            <Route path="/modal/login" component={LoginTitle} />
            <Route path="/modal/forgot" component={ForgotTitle} />
            <Route path="/modal/reset" component={ResetTitle} />
          </Switch>
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <Switch>
            <Route exact path="/modal/register" component={Register} />
            <Route path="/modal/login" component={Login} />
            <Route path="/modal/forgot" component={Forgot} />
            <Route path="/modal/reset" component={Reset} />
          </Switch>
        </div>
      </Modal.Body>
      <Modal.Footer>
        <Link to="/"><Button>Close</Button></Link>
      </Modal.Footer>
    </Modal.Dialog>
  );
}

const App = () => {
  return (
    <div>
      <Route path='/modal' children={(props) => props.match ? <UserModal {...props}/> : null}/>
      <Link to="/modal/register"><Button>Register</Button></Link>
      <Link to="/modal/login"><Button>Login</Button></Link>
      <Link to="/modal/forgot"><Button>Forgot</Button></Link>
      <Link to="/modal/reset"><Button>Reset</Button></Link>
    </div>
  );
};

const Register = () => {
  return (
    <div>
      <h1>Register</h1>
      <Link to="/modal/register2"><Button>Next</Button></Link>
    </div>
  );
};
const RegisterTitle = () => <div>Register</div>;
const LoginTitle = () => <div>Login</div>;
const ForgotTitle = () => <div>Forgot</div>;
const ResetTitle = () => <div>Reset</div>;

const Login = () => <h1>Login</h1>;
const Forgot = () => <h1>Forgot</h1>;
const Reset = () => <h1>Reset</h1>;

export default function () {
  return (<HashRouter><App /></HashRouter>);
}