React

by amiramix

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/5.1.2/react-router-dom.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;
}

header, main, footer {
  margin: 1rem;
  border-top: solid 1px black;
}

main {
  min-height: 1rem;
  border-left: solid 1rem #79f;
  padding: 2rem 0;
}


.a {
  background-color: rgba(0, 0, 0, .3);
}

React

const { MemoryRouter, Route, Link, NavLink, useRouteMatch } = window.ReactRouterDOM;

let count = 0;

const App = props => {
  count = count + 1;
  const match = useRouteMatch();
  return (
    <div>
      <header>
        <ul>
          <li>
            <NavLink activeClassName="a" exact to="/">To /</NavLink>
          </li>
          <li>
            <NavLink activeClassName="a" to="/r1">To /r1</NavLink>
          </li>
          <li>
            <NavLink activeClassName="a" to="/r2">To /r2</NavLink>
          </li>
        </ul>
      </header>
      <main>
        <Route path="/" exact render={() => `Route /, path: ${match.path}, url: ${match.url}, renders: ${count}`} />
        <Route path="/r1" render={() => `Route /r1, path: ${match.path}, url: ${match.url}, renders: ${count}`} />
        <Route path="/r2" render={() => `Route /r2, path: ${match.path}, url: ${match.url}, renders: ${count}`} />
      </main>
    </div>
  );
}

ReactDOM.render(
  <MemoryRouter initialEntries={["/r1", "/r2", { pathname: "/r1" }]}>
    <App />
  </MemoryRouter>,
  document.getElementById('app')
);