Pages & Routers

Isthmus also includes react-router-dom to create different pages in your application. The router is in AppRouter.js. To create a new page you can make a copy of Page.js and rename the file and designate a new page name in the router. For example, the default app router looks like this:

import React from 'react';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
import Page from '../components/Page';
import RightBar from '../components/RightBar'
import NotFoundPage from '../components/NotFoundPage';
import Menu from '../components/Menu';

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path="/" component={Page} exact={true} />
        <Route component={NotFoundPage} />
      </Switch>
    </div>
  </BrowserRouter>
);

export default AppRouter;

Let’s say you create a new page called NewPage.js, then the router will look like this:

import React from 'react';
import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom';
import Page from '../components/Page';
import NewPage from '../components/NewPage';
import RightBar from '../components/RightBar'
import NotFoundPage from '../components/NotFoundPage';
import Menu from '../components/Menu';

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path="/" component={Page} exact={true} />
        <Route path="/newpage" component={NewPage} exact={true} />
        <Route component={NotFoundPage} />
      </Switch>
    </div>
  </BrowserRouter>
);

export default AppRouter;

Here is a great article on all the options within the react-router-dom package for you to get started with more advanced routing options.