How to use the react-router-dom.Route function in react-router-dom

import * as React from 'react';
import * as Bootstrap from "react-bootstrap";
var Router = require("react-router-dom").BrowserRouter;
var Route = require("react-router-dom").Route;

// import './App.css';
// var Text = require('react-native-web').Text;

import { Header, FeatureSummary, Feature, View } from './Components';
import * as model from 'livedoc-model';

// const logo = require('./logo.svg');
const data: model.Feature[] = require('./livedoc.json');

const features: model.Feature[] = [];
data.forEach(featureData => {
  const feature = Object.assign(new model.Feature(), featureData);
  features.push(feature);
});

function Root() {
    return _react2.default.createElement(
        _reactRouterDom.Switch,
        null,
        _react2.default.createElement(_reactRouterDom.Route, { exact: true, path: "/", component: function component() {
                return _react2.default.createElement(_FrontPage2.default, null);
            } }),
        _react2.default.createElement(_reactRouterDom.Route, { exact: true, path: "/findr", component: _Findr2.default }),
        _react2.default.createElement(_reactRouterDom.Route, { exact: true, path: "/todo", component: _Todo2.default }),
        _react2.default.createElement(_reactRouterDom.Route, { exact: true, path: "/github/:account/gists/:path*", component: _Escherpad2.default }),
        _react2.default.createElement(_reactRouterDom.Route, { exact: true, path: "/github/:account/:repo/:path*", component: _Escherpad2.default }),
        _react2.default.createElement(_reactRouterDom.Route, { exact: true, path: "/dropbox/:account/:path*", component: _Escherpad2.default }),
        _react2.default.createElement(_reactRouterDom.Route, { exact: true, path: "/:username/", component: _Escherpad2.default }),
        _react2.default.createElement(_reactRouterDom.Route, { exact: true, path: "/:username/notes:/:note_id", component: _Escherpad2.default }),
        _react2.default.createElement(_reactRouterDom.Route, { exact: true, path: "/:username/:bindr_id/", component: _Escherpad2.default }),
        _react2.default.createElement(_reactRouterDom.Route, { exact: true, path: "/:username/:bindr_id*/:note_id", component: _Escherpad2.default }),
        _react2.default.createElement(_reactRouterDom.Route, { component: _2.default })
    );
}
//# sourceMappingURL=Root.js.map

var CustomLink = function (_a) {
    var label = _a.label, to = _a.to, _b = _a.activeOnlyWhenExact, activeOnlyWhenExact = _b === void 0 ? false : _b, myClassName = _a.myClassName;
    return (React.createElement(react_router_dom_1.Route, { path: to, exact: activeOnlyWhenExact, children: function (_a) {
            var match = _a.match;
            return (React.createElement("li", { className: match ? "user-center-navigation-active" : "" },
                React.createElement(react_router_dom_1.Link, { className: "" + myClassName, to: to },
                    React.createElement("p", null, label))));
        } }));
};
//# sourceMappingURL=UserCenterNavigation.js.map

hash: rd.HashRouter,
  browser: rd.BrowserRouter,
  static: rd.StaticRouter,
}[routeConf.mode] || rd.HashRouter;

const Route = {
  hash: rd.Route,
  static: rd.Route,
  browser: props => {
    const { path, children, ...others } = props;
    const { baseUri } = routeConf;
    return 
      {children}
    ;
  },
}[routeConf.mode] || rd.Route;

const Link = {
  hash: rd.Link,
  static: props => {
    const { to, children, ...others } = props;
    const { extname } = routeConf;
    const href = normalize(`./${to}${to != '/' ? extname : ''}`);
    return <a href="{href}">
      {children}
    </a>;
  },
  browser: props =&gt; {
    const { to, children, ...others } = props;
    const { baseUri, extname } = routeConf;
    const href = normalize(`/${baseUri}/${to}${to != '/' ? extname : ''}`);
    return

App.prototype.render = function () {
        var data = '[b]Test[/b] [img]http://file.cc98.org/uploadface/5298.png[/img] [noubb][b]Test No UBB[/b][/noubb]';
        return React.createElement("div", null,
            React.createElement(react_router_dom_1.BrowserRouter, null,
                React.createElement("div", { style: { backgroundColor: '#F5FAFD', justifyContent: 'center', display: 'flex', flexDirection: 'column' } },
                    React.createElement(Header_1.Header, null),
                    React.createElement(UbbContainer_1.UbbContainer, { code: data }),
                    React.createElement(react_router_dom_1.Route, { exact: true, path: "/", component: MainPage_1.MainPage }),
                    React.createElement(react_router_dom_1.Route, { exact: true, path: "/topic/:topicid/:page?", component: post_1.Post }),
                    React.createElement(react_router_dom_1.Route, { exact: true, path: "/topic/:topicid/user/:userName/:page?", component: CurUserPost_1.CurUserPost }),
                    React.createElement(react_router_dom_1.Route, { path: "/list/:boardid/:page?", component: List_1.List }),
                    React.createElement(react_router_dom_1.Route, { exact: true, path: "/boardlist", component: BoardList_1.BoardList }),
                    React.createElement(react_router_dom_1.Route, { path: "/usercenter", component: UserCenter_1.UserCenter }),
                    React.createElement(react_router_dom_1.Route, { path: "/messagebox", component: MyMessage_1.MyMessage }),
                    React.createElement(react_router_dom_1.Route, { path: "/newtopics", component: AllNewPost_1.AllNewPost }))));
    };
    return App;

_react2.default.createElement(
            _reactRouter.Switch,
            null,
            this.renderRoutes()
          )
        );
      }

      return _react2.default.createElement(
        _reactRouterDom.BrowserRouter,
        null,
        _react2.default.createElement(
          _reactRouter.Switch,
          { style: {} },
          this.renderRoutes(),
          this.props.theme && this.props.theme.notFoundPageText && _react2.default.createElement(_reactRouterDom.Route, { component: function component() {
              return _react2.default.createElement(_2.default, _this7.props.theme);
            } })
        )
      );
    }
  }, {

render() {
        return (React.createElement("div", { style: { margin: '5px' } },
            React.createElement(react_router_dom_1.BrowserRouter, null,
                React.createElement(react_router_dom_1.Switch, { location: ReactRouters_1.ReactRouters.createLocationWithPathnameHash() },
                    React.createElement(react_router_dom_1.Route, { exact: true, path: '/#hello' },
                        React.createElement("div", null,
                            React.createElement(Navbar_1.Navbar, null),
                            "this is the HELLO page :)")),
                    React.createElement(react_router_dom_1.Route, { exact: true, path: '/user' },
                        React.createElement("div", null,
                            React.createElement(Navbar_1.Navbar, null),
                            "this is the USER page")),
                    React.createElement(react_router_dom_1.Route, { exact: true, path: '/' },
                        React.createElement("div", null,
                            React.createElement("div", null,
                                React.createElement(Navbar_1.Navbar, null),
                                "this is the DEFAULT page.")))))));
    }
}

render() {
        return React.createElement(react_router_dom_1.Route, { render: (routerProps) => {
                const staticContext = routerProps["staticContext"];
                if (staticContext) {
                    staticContext.status = this.props.code;
                }
                return this.props.children;
            } });
    }
}

}((function () { 'use strict';

  var _nornj = require("nornj");

  var _reactRouterDom = require("react-router-dom");

  (0, _nornj.registerComponent)({
    BrowserRouter: _reactRouterDom.BrowserRouter,
    HashRouter: _reactRouterDom.HashRouter,
    'router-Link': _reactRouterDom.Link,
    MemoryRouter: _reactRouterDom.MemoryRouter,
    'router-NavLink': _reactRouterDom.NavLink,
    'router-Prompt': _reactRouterDom.Prompt,
    Redirect: _reactRouterDom.Redirect,
    Route: _reactRouterDom.Route,
    Router: _reactRouterDom.Router,
    StaticRouter: _reactRouterDom.StaticRouter,
    'router-Switch': _reactRouterDom.Switch
  });

})));

render() {
        return (React.createElement(MuiThemeProvider_1.default, { muiTheme: this.muiTheme },
            React.createElement("div", null,
                React.createElement(appBarNormal_1.default, { className: this.state.searching && "vanish", onSearchIconClick: this.handleSearchToggle.bind(this), switchSorting: (sortType) => this.setState({ sortFunction: sorting_1.getSortFunction(sortType) }) }),
                React.createElement(appBarSearching_1.default, { className: !this.state.searching && "vanish", onBackSpaceIconClick: this.handleSearchToggle.bind(this) }),
                React.createElement("div", { className: "container", style: { marginTop: '.5em' } },
                    React.createElement(react_router_dom_1.Switch, null,
                        React.createElement(react_router_dom_1.Route, { exact: true, path: "/", render: (props) => React.createElement(movieList_1.default, Object.assign({}, props, { sortFunction: this.state.sortFunction })) }),
                        React.createElement(react_router_dom_1.Route, { path: "/upcoming", render: (props) => React.createElement(movieList_1.default, Object.assign({}, props, { sortFunction: this.state.sortFunction })) }),
                        React.createElement(react_router_dom_1.Route, { path: "/movie/:id", component: movieDetailTabs_1.default }),
                        React.createElement(react_router_dom_1.Route, { path: "/movies/:ids", render: (props) => React.createElement(movieList_1.default, Object.assign({}, props, { sortFunction: this.state.sortFunction })) }),
                        React.createElement(react_router_dom_1.Route, { path: "/movienotfound/:query", component: movieNotFound_1.default }),
                        React.createElement(react_router_dom_1.Route, { path: "/theaters", component: theaterList_1.default }),
                        React.createElement(react_router_dom_1.Route, { path: "/theater/:name", render: (props) => React.createElement(theaterDetail_1.default, Object.assign({}, props, { sortFunction: this.state.sortFunction })) }),
                        React.createElement(react_router_dom_1.Route, { component: pageNotFound_1.default }))))));
    }
}