React Router DOM

Example of basic route switching with React Router DOM.

by Abdul Ahmad

HTML

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
<div id="app"></div>

CSS

body {
  font-family: Arial, Helvetica, sans-serif;
}

Babel + JSX

// Select the node we wish to mount our React application to
const MOUNT_NODE = document.querySelector('#app');

// Grab components out of the ReactRouterDOM that we will be using
const { BrowserRouter, Route, Switch, NavLink } = window.ReactRouterDOM;

function Page1() {
  return <div>Page 1</div>;
}

function Page2() {
  return <div>Page 2</div>;
}

function Home() {
  return <div>Home</div>;
}

function Layout({ children }) {
	return (
  	<div>
      <nav>
        <NavLink to='page2'>Page 2</NavLink>
      </nav>
      <main>{ children }</main>
    </div>
  );
}

function App() {
  return (
    <Layout>
      <BrowserRouter>
        <Switch>
          <Route exact path='/page1' component={Page1} />
          <Route exact path='/page2' component={Page2} />
          {/* these are needed for jsFiddle to render Home properly */}
          <Route path='/tophergates' component={Home} />
          <Route path='/_display/' component={Home} />
          <Route path='*' component={Home} />
        </Switch>
      </BrowserRouter>
    </Layout>
  );
}

// Render the application
ReactDOM.render(<App />, MOUNT_NODE);