JSFiddle - React, Tailwind, and code Playground

by arun7it

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-router-dom.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.navLinks {
  list-style: none;
  background: #333;
}

.navLinks li a {
  color: #fff;
  padding: 1rem;
  text-decoration: none;
}

li {
  display: inline-block;
  margin: 10px;
  color: white;
}

Babel + JSX

const { BrowserRouter, Route, Switch, NavLink, Redirect } = window.ReactRouterDOM;

const PageNotFound = () => <h1>404 Page not found</h1>;

const Home = () => <div>Home</div>;

const Contact = (props) => (
  <div>
    <h1>Contact</h1>
    <p>param name: {props.match.params.name}</p>
    <p>param age: {props.match.params.age}</p>
  </div>
);

const Navigation = () => (
	<ul className="navLinks">
	  <li><NavLink  to="/">Home</NavLink></li>
	  <li><NavLink to="/contact/john50">Working Contact</NavLink></li>
	  <li><NavLink to="/contact/">Contact With Slash</NavLink></li>
    <li><NavLink to="/contact">Contact Without Slash</NavLink></li>
	</ul>
);


const Root = () => <BrowserRouter>
  <Navigation />
  <Switch>
   <Route path="/" component={Home} exact />
   <Route path="/contact/:name([A-Za-z]+)?:age(\d{2})?" component={Contact} />
   <Route render={()=>(
   	<Redirect to={Home} />
   )} />
  </Switch>
</BrowserRouter>;



ReactDOM.render(
  <Root />,
  document.getElementById('container')
);