# A Super Short BASIC Guide on Implementing Browser Router in your React Application

### 1\. First Install react-router-dom

```javascript
npm i react-router-dom
```

### 2\. Import the necessary modules

```javascript
//App.js
import { Routes, Route, BrowserRouter as Router } from 'react-router-dom';
```

### 3\. Wrap every component that needs routing in a single Router component

```javascript
//... Main App
  return (
    <Router>
      <MyComponentA />
      <MyComponentB />
      <MyComponentC />
    </Router>
  );
```

### 4\. Now Wrap them in a single Routes component

```javascript
  return (
    <Router>
     <Routes>
        <MyComponentA />
        <MyComponentB />
        <MyComponentC />
      </Routes>
    </Router>
  );
```

### 5\. For each specific route, create a `Route` component inside the `Routes` component

```javascript
  return (
    <Router>
      <Routes>
        <Route exact path="/AandB" />
        <Route path="/C" />
        <MyComponentA />
        <MyComponentB />
        <MyComponentC />
      </Routes>
    </Router>
  );
```

### 6\. For each `Route` component, add an `element` attribute and move the components into the attribute

Take Note this is written in JSX so for multiple components, you will need a parent element or fragment

```javascript
  return (
    <Router>
      <Routes>
        <Route
          exact
          path="/AandB"
          element={
            <>
              <MyComponentA />
              <MyComponentB />
            </>
          }
        />
        <Route path="/C" element={<MyComponentC />} />
      </Routes>
    </Router>
  );
```

## Extras

---

### 7\. Link Component vs Anchor tag

Links in React and anchor tags have similar functionality, but there are some key differences between them:

**Syntax:** In React, you create a link using the component from the react-router-dom library, while in HTML, you use the tag.

**Routing:** The component in React allows you to manage routing within your application, while anchor tags will cause the page to reload and navigate to the specified URL.

**Dynamic behavior:** With the component, you can dynamically update the destination of the link based on the state of your application, while anchor tags always navigate to the same URL.

**Integration with React:** The component integrates seamlessly with React, allowing you to use it as part of your component-based architecture, while anchor tags are part of the HTML markup.

In summary, while both links in React and anchor tags allow you to create links to other pages, the component provides additional functionality for managing routing within your React application and integrating with the React framework.

```javascript
<a href ='/about'> About Page </a>

//becomes

import {Link} from react-router-dom;

<Link to='/about'> About Page </Link>
```

### 8\. NavLinks and useParams

NavLinks has a prop called `activeClassName` that allows you to highlight the link you are currently on.

```javascript
        <NavLink to="/" activeClassName="highlight">
          Home
        </NavLink>

        <NavLink to="/about" activeClassName="highlight">
          About
        </NavLink>
```

Getting the Params from a URL requires a hook called `useParams` provided by react-router-dom.

```javascript
//main app

<Route path="/post/:id/:name" element={<Post/>} />

//post component
import { useParams  } from "react-router-dom";
function Post() {
  const params = useParams();
  return (
    <div>
    <p>Post Id: {params.id}</p>
    <p>Written By: {params.name}</p>
    </div>
  )
}
```

Assuming the link is `localhost:3000/post/376/William`

The result would show:

> Post Id: 376
> 
> Written By: William

### 9\. Navigation and Nested Routes

To navigate(redirect) to different parts of the app depends on the situation.

First, we can use `Navigate`

```javascript
import { Navigate } from "react-router-dom";
function Post() {
const status = getStatus();
if(status ====404){
  return <Navigate to='/NotFound>'/>
}

  return (
    <div>
    <h1>Posts</h1>
  
    </div>
  )
}
```

Alternatively, you can use `useNavigate`

```javascript
import { Navigate, useNavigate } from "react-router-dom";


function Post() {

  const navigate = useNavigate();

  const handleClick = ()=>{
    //do something then redirect
    
  navigate('/login')
  }


  return (
    <div>
    <h1>Posts</h1>
    <Button onClick={handleClick}> </Button>
  
    </div>
  )
}
```

`useNavigate` is a hook that provides access to the `navigate` method within functional components, whereas `navigate` is the method directly provided by the `react-router-dom` library that can be used in any context.

Let's assume we want the Post component to have a nested route /badge, which resolves to /post/badge to reveal a Badge component.

To get nested routes, add the `Routes` and `Route` imports from `react-router-dom` in the chosen component (Post) and add the `Routes` and `Route` components as required then add the nested component in the element prop of the `Route` component (`<BadgeComponent/>`)

However, for this to work, the route that is responsible for navigating to post in the main component must have a forward slash and an asterisk (/\*) after the path. Visually it looks like this:

```javascript

┌─────────────────────┐
│Main App Component   │    The Component that
│<Route path="/post/*"│    Routes to post must
│ element={<Post/>} />│    append "/*" to path
└─────────┬───────────┘    for Badge to render
          │               ┌─────────────────────┐
          │               │Post Copmponent      │
          └─────────────► │<Route path="/badge" │
                          │element={<Badge/>} />│
                          │                     │
                          └──────────┬──────────┘
                                     │
  Badge component                    │
  nested in Post                     ▼
  component                 ┌────────────────┐
                            │Badge Component │
localhost:3000/post/badge/  └────────────────┘
  

    
```

The code looks like this:

```javascript

//Main App
...
    <Route path="/post/*" element={<Post />} />


//Post Component
import { Routes, Route, } from "react-router-dom";
function Post() {

  return (
    <div>
    <h1>Posts</h1>
    <Routes>
      <Route path='/badge' element={<BadgeComponent/>}>
        
      </Route>
    </Routes>
  
    </div>
  )
}
```

If you go to `localhost:3000/post/badge` you will see the Badge component. The Badge component will not be displayed on `/post` and will not work if you omit the trailing `/*` in the Post component's route path in the main App (parent component).