daily log 11.30.20

Using react-router-dom

Sandbox here

1. Add it to the project yarn add react-router-dom @material-ui/core
2. Add a Router.js file (not necessary but clean and tidy)
3. Add it to the main app file (literally enclose EVERYTHING) by wrapping EVERYTHING in BrowserRouter
4. Add links with this format <ListItem button component={Link} to={ProjectsRoute}>
5. DO NOT FORGET TO PASS props.children to the surrounding component

Overall “Structure”

APP.JS

• ROUTER (from react-router-dom) enclosing – ROUTES.JS – /ROUTER
• LAYOUT.JS
  • “Nav Bar” Buttons
  • {props.children}
    • HOME.JS
    • PROJECTS.JS

APP.JS

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import "./styles.css";
import Routes from "./Routes";

export default function App() {
  return (
    <Router>
      <Routes />
    </Router>
  );
}

ROUTES.JS

import React from "react";
import { Route, withRouter } from "react-router-dom";
import Home from "./Home";
import Projects from "./Projects";
import Layout from "./Layout";
export const HomeRoute = "/";
export const ProjectsRoute = "/projects/";
const Routes = () => {
  return (
    <Layout>
      <Route path={HomeRoute} exact component={Home} />
      <Route path={ProjectsRoute} component={Projects} />
    </Layout>
  );
};

export default withRouter(Routes);

LAYOUT.JS

import React from "react";
import { List, ListItem, Divider } from "@material-ui/core";
import { ProjectsRoute, HomeRoute } from "./Routes";
import { Link } from "react-router-dom";
const Layout = (props) => {
  return (
    <div className="dashboard">
      <List>
        <ListItem button component={Link} to={HomeRoute}>
          Home
        </ListItem>
        <ListItem button component={Link} to={ProjectsRoute}>
          Projects
        </ListItem>
      </List>
      <Divider />
      {props.children}
    </div>
  );
};

export default Layout;

HOME.JS

import React from "react";
const Home = () => {
  return (
    <div className="dashboard">
      <h1>HOME HOME HOME!!</h1>
    </div>
  );
};

export default Home;

PROJECTS.JS

import React from "react";
const Home = () => {
  return (
    <div className="dashboard">
      <h1>PROJECTS PROJECTS PROJECTS</h1>
    </div>
  );
};

export default Home;