React-Router@5 Template

index.html

<div id="root">

</div>

react-router-5-template.markdown

React-Router@5 Template

template for react-router v5

A Pen by James Conkling on CodePen.

License.

script.babel

const { render } = ReactDOM

const {
  HashRouter,
  Route,
  Link
} = ReactRouterDOM

const App = () => (
  <HashRouter>
    <div>
      <AddressBar/>

      <Route exact path="/" component={Home}/>
      <Route path="/items/:itemId" component={Item}/>
    </div>
  </HashRouter>
)

const Home = () => (
  <div>
    <h1>demo</h1>
    <Link to="/items/1">Go to Item 1</Link>
  </div>
)

const Item = (props) => (
  <div>
    <h3>item #{props.match.params.itemId}</h3>
    <Link to="/items/2">Go to Item 2 (works!)</Link>
    <br />
    <button
      onClick={() => {
        // console.log('history', props.history.push);
        props.history.push("/items/2")
      }}
    >
      Go to Item 2 (doesn't work)
    </button>
  </div>
)


const AddressBar = () => (
  <Route render={({ location: { pathname }, goBack, goForward }) => (
    <div className="address-bar">
      <div>
        <button
          className="ab-button"
          onClick={goBack}
        >◀︎</button>
      </div>
      <div>
        <button
          className="ab-button"
          onClick={goForward}
        >▶</button>
      </div>
      <div className="url">URL: {pathname}</div>
    </div>

  )}/>
)

render(<App/>, document.getElementById('root'))

scripts

<script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
<script src="https://unpkg.com/react-router-dom@4.1.2/umd/react-router-dom.js"></script>

style.css

body {
  margin: 8px;
  font-family: -apple-system, 
               BlinkMacSystemFont, 
               "Segoe UI", 
               Roboto, 
               Oxygen,
               Ubuntu,
               Cantarell,
               "Open Sans",
               "Helvetica Neue", 
               sans-serif;
}

.address-bar {
  margin: -8px;
  padding: 10px;
  background: #ccc;
  display: flex;
  align-items: center;
}

.ab-button {
  border: none;
  background: none;
  font-size: 30px;
  color: #444;
  outline: none;
}

.ab-button:focus {
  color: hsl(200, 50%, 50%)
}

.ab-button:hover {
  color: #666;
}

.ab-button:active {
  color: #000;
}

.url {
  background: white;
  flex: 1;
  margin-left: 10px;
  padding: 10px;
  color: #aaa;
}