JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.2.2/react-router-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/history/4.7.2/history.js"></script>
<div id="root"></div>

Babel + JSX

const Router = ReactRouterDOM.Router;
const Route = ReactRouterDOM.Route;
const Switch = ReactRouterDOM.Switch;
const createBrowserHistory = History.createBrowserHistory;

const browserHistory = createBrowserHistory();

const rootDiv = document.getElementById('root');

class TextInput extends React.Component {
  constructor(props) {
    super();
    this.props = props;
  }

  render() {
    return <input type="text" value={this.props.value} onChange={this.handleChange}/>;
  }
  
  handleChange(event) {
    render({ value: event.target.value });
  }
}

const View = props => <TextInput key="haha" {...props}/>;

const render = props => {
  const App = props => (
    <Router history={browserHistory}>
      <Switch>
        <Route key="/login" path="/login" render={() => View(props)}>
        </Route>
      </Switch>
    </Router>
  );
  ReactDOM.render(
    <App {...props}/>,
    rootDiv
  );
}

render({ value: 'Hello World!' });

browserHistory.push('/login');