Роутинг React.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import {
  Switch,
  Route,
  BrowserRouter,
  Router,
  Link,
  browserHistory,
  withRouter
} from 'react-router-dom';
import { createBrowserHistory } from 'history';
 
const history = createBrowserHistory();
 
const Flex = ({ children }) => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>{children}</div>
  );
};
 
// Routings
const MAIN_ROUTE = '/';
const PUNCT = '/punct';
 
const PUNCT_ONE = `${PUNCT}/1`;
const PUNCT_ONE_ONE = `${PUNCT_ONE}/1`;
const PUNCT_ONE_TWO = `${PUNCT_ONE}/2`;
 
const PUNCT_TWO = `${PUNCT}/2`;
 
const Default = () => {
  return (
    <div>
      <p>default</p>
      <Link to="/punct">пункт</Link>
    </div>
  );
};
 
const PunctOne = () => {
  const Back = () => <Link to={PUNCT_ONE}>Назад</Link>;
 
  return (
    <Switch>
      <Route path={PUNCT_ONE_ONE} component={Back} />
      <Route
        path={PUNCT_ONE_TWO}
        component={() => (
          <Flex>
            <span>punct 1.2</span>
            {<Back />}
          </Flex>
        )}
      />
 
      <Flex>
        <Link to={PUNCT_ONE_ONE}>пункт 1.1</Link>
        <Link to={PUNCT_ONE_TWO}>пункт 1.2</Link>
        <Link to={PUNCT}>Назад</Link>
      </Flex>
    </Switch>
  );
};
 
const Punct = () => {
  const Back = () => <Link to={PUNCT}>Назад</Link>;
 
  return (
    <Switch>
      <Route path={PUNCT_ONE} component={PunctOne} />
      <Route
        path={PUNCT_TWO}
        component={() => (
          <Flex>
            <span>punct 2</span>
            {<Back />}
          </Flex>
        )}
      />
 
      <Flex>
        <Link to={PUNCT_ONE}>пункт 1</Link>
        <Link to={PUNCT_TWO}>пункт 2</Link>
        <Link to={MAIN_ROUTE}>Назад</Link>
      </Flex>
    </Switch>
  );
};
 
class App extends Component<AppProps, AppState> {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route path={PUNCT}>
            <Punct />
          </Route>
          <Route path="/">
            <Default />
          </Route>
          <Route component={Default} />
        </Switch>
      </BrowserRouter>
    );
  }
}
 
render(<App />, document.getElementById('root'));