React - Router

by Fulvio Cezar Canducci Dias

HTML

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

Babel + JSX

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

function BasePage({title, lead}) {
	return (
  	<div class="jumbotron jumbotron-fluid">
    <div class="container">
      <h1 class="display-4">{title}</h1>
      <p class="lead">{lead}</p>
    </div>
</div>
  )
}
function Home () {
	return (
  	<BasePage lead='Home Page' title='Home' />
  )
} 
function About () {
	return (
  	<BasePage lead='About Page' title='About' />
  )
} 
function App() {
	return (
  	<BrowserRouter>  
      <div>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <Link to="/" className="navbar-brand">Navbar</Link>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <Link to="/" className="nav-link">Home</Link>
              <Link to="/about" className="nav-link">About</Link>
            </div>
          </div>
        </nav>
        <Switch>        
          <Route path='/about' component={About}/>
          <Route path='/' component={Home}/>
        </Switch>  
      </div>      
    </BrowserRouter>    
  )
}

ReactDOM.render(
	<App />, 
  document.getElementById("app")
);