Project Summary

In this project, we will create a very basic React blog application that makes use of multiple routes. We will be using the react-router-dom package.

Live Example

Click Me!

Setup

Fork and clone this repository.
Run npm i.

Step 1

Summary

In this step we will install the routing package we need and setup our router.

Instructions

Run npm i react-router-dom.
Open App.js.
Import HashRouterfrom react-router-dom.
Wrap the HashRouter component around the existing div.

Solution

src/App.js

import React, { Component } from "react";
import { HashRouter } from 'react-router-dom';
import Nav from "./Components/Nav/Nav";
import "./App.css";

class App extends Component {
  render() {
    return (
      <HashRouter>
        <div className="App">
          <Nav />
          <h1 style={{ padding: "200px 35%" }}>
            This is where your pages will appear
          </h1>
        </div>
      </HashRouter>
    );
  }
}

export default App;

Step 2

Summary

In this step, we will create our routes using the existing components.

Instructions

Create a new file, routes.js in src.
Import React.
Import Switch and Route from react-router-dom.
Import two of our view components, Home andTopicList.
Export by default a Switch component.
Add two Route components inside the Switch component, one for both the views we imported.
- Each route should have a path and a component prop.
- Home should have a path of '/'.
  - Home should have the exact prop
- TopicList should have a path of '/topics'.

Solution

src/routes.js

import React from "react";
import { Switch, Route } from "react-router-dom";
import Home from "./Components/Home/Home";
import TopicList from "./Components/TopicList/TopicList";

export default (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/topics" component={TopicList} />
  </Switch>
);

Step 3

Summary

In this step, we'll render the routes inside the main App.js component.

Instructions

Open App.js.
Import the routes.js file.
Delete the entire h1 element.
Underneath the Nav component use {} to interpolate (insert) and render the imported router.

Solution

src/App.js

import React, { Component } from "react";
import { HashRouter } from "react-router-dom";
import routes from "./routes";
import Nav from "./Components/Nav/Nav";
import "./App.css";

class App extends Component {
  render() {
    return (
      <HashRouter>
        <div className="App">
          <Nav />
          {routes}
        </div>
      </HashRouter>
    );
  }
}

export default App;

Step 4

Summary

In this step, we will setup navigation to the routes we just created.

Instructions

Open Nav.js.
Import Link from react-router-dom.
Wrap a Link component around the content of the two li tags.
- The Home li should link to '/'.
- The Topics li should link to '/topics'.

Solution

src/Components/Nav/Nav.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import logo from "./../../images/dm_white_logo.png";
import "./Nav.css";

class Nav extends Component {
  render() {
    return (
      <div className="Nav">
        <div>
          <img src={logo} alt="dm logo" />
        </div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>
      </div>
    );
  }
}

export default Nav;

Step 5

Summary

In this step, we'll add another route that uses parameters.

Instructions

Open routes.js.
Import our final view component, Post.
Add an additional Route component to our Switch.
- It should have a path of '/post/:id'.

Solution

src/routes.js

import React from "react";
import { Switch, Route } from "react-router-dom";
import Home from "./Components/Home/Home";
import TopicList from "./Components/TopicList/TopicList";
import Post from "./Components/Post/Post";

export default (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/topics" component={TopicList} />
    <Route path="/post/:id" component={Post} />
  </Switch>
);

Step 6

Summary

In this step, we'll change our Post view to use the route parameter to display the correct blog post.

Instructions

Open Post.js.
Update the find method in componentDidMount to use the params data instead of being hard-coded to the number 2.
- Remember routing data, like parameters, is found on props.
- IMPORTANT: parameters are strings (because they are a part of the URL). The ids of our posts are numbers, so be careful when comparing them.

Solution

src/Components/Post/Post.js

...
  componentDidMount() {
    // This is where you would make an axios call to a server in a fullstack application
    // but for today we'll be just be filter over an array of dummy data
    let post = posts.find(post => post.id === parseInt(this.props.match.params.id));
    this.setState({
      title: post.title,
      content: post.content
    });
  }
...

Step 7

Summary

In this step, we'll change our TopicList view to link to the Post view.

Instructions

Open TopicList.js.
Import Link from react-router-dom.
Wrap a Link component around the content of theli tag found in the .map.
The li should link to '/post/' + the id of the post.

Solution

src/Components/TopicList/TopicList.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import posts from "./../../post_data.json";
import "./TopicList.css";
...
    let displayTopics = posts.map(post => {
      return (
        <li key={post.id}>
          <Link to={`/post/${post.id}`}>{post.title}</Link>
        </li>
      );
    });
...

Contributions

If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.

Copyright

© DevMountain LLC, 2019. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.

# Routing-Mini-Project-React5 # Routing-Mini-Project-React5

blamb31 / routing-mini-project-react5 Goto Github PK

routing-mini-project-react5's Introduction

Project Summary

Live Example

Setup

Step 1

Summary

Instructions

Solution

Step 2

Summary

Instructions

Solution

Step 3

Summary

Instructions

Solution

Step 4

Summary

Instructions

Solution

Step 5

Summary

Instructions

Solution

Step 6

Summary

Instructions

Solution

Step 7

Summary

Instructions

Solution

Contributions

Copyright

routing-mini-project-react5's People

Contributors

Recommend Projects

Recommend Topics

Recommend Org