React Router DOM Tutorial | Build a Simple Router in React in 10 Minutes Tutorial For Beginners

React Router DOM Tutorial | Build a Simple Router in React in 10 Minutes Tutorial For Beginners

 

Welcome folks today in this tutorial we will be building a simple react router in 10 minutes using react router dom library. All the source code of the tutorial is given below. A step by step youtube video is also shown below.

 

 

 

Screenshots

 

 

In this application we will be building a list of links where we will be clicking on each link and it will change the id inside the heading. This is a simple routing functionality which is built in React.

 

Dependencies

 

We are using the react-router-dom dependency for this project.

npm i react-router-dom

 

Now make our app.js file which will be the react component file and copy paste the following code to it.

 

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

// Params are placeholders in the URL that begin
// with a colon, like the `:id` param defined in
// the route in this example. A similar convention
// is used for matching dynamic segments in other
// popular web frameworks like Rails and Express.

export default function App() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

function Child() {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { id } = useParams();

  console.log({ id });

  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}

 

See also  Build a Audio Converter App in React Native For Android & IOS Devices Using Javascript Full Project For Beginners

 

Leave a Reply