React-router-dom

The react-router-dom is a library to load pages as part of a route. Since version 6.0 the syntax has changed a bit.

Example project

### Imports:

```
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

```

### Basic syntax:

```
<Router>// synonym or short variable for BrowserRouter
 <Header />
 <div className="container">
 <Routes> // Route must be a direct child of Routes
 <Route exact path="/" element={ // route 1 home route
 <> // just like return needs a closing tag
 <CustomComponent1 handleAdd={addProp} />
 <CustomComponent2 value={value} />
 <CustomComponent3 useValue={true} handleDelete={prop} />
 </>
 } />
 <Route exact path="/about" element={<AboutPage />} /> // route 2 about
 </Routes>
 </div>
</Router>

```

#### The hierarchy of the Routes -> Route must be followed as shown in the basic syntax.

* BrowserRouter (or renamed to Router) must have a Routes child somewhere inside
* Routes expects a set of Routes as direct descendants
* Route takes a page / component / ect. ... as parameter for **element** which will be returned when the route is being called

## Linking to pages

Unlike the other parts of the routing Links can be placed everywhere and don't need any special treatment since the only call the change of routes like an **a** tag

### Import:

```
import { Link } from "react-router-dom";

```

### Links:

```
<Link to="/">Back Home</Link>

<Link to="/about">
 <IconComponent size={30} />
</Link>

```

#### The Link component can take parameters within the to attribute:

```
<Link to="/">Back Home</Link>

<Link
 to={{
 pathname: "/about",
 search: "?sort=name",
 hash: "#hello"
 }}
>
 <IconComponent size={30} />
</Link>

```

## Routes with parameters (e.g. id's)

To have a route transmit certain parameters for the selected page **react-router-dom** offers a **hook** called **useParams**.

The **useParams** hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the **<Route path>**. Child routes inherit all params from their parent routes.

### Example:

```
import \* as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

function ProfilePage() {
 // Get the userId param from the URL.
 let { userId } = useParams();
 // ...
}

function App() {
 return (
 <Routes>
 <Route path="users">
 <Route path=":userId" element={<ProfilePage />} />
 <Route path="me" element={...} />
 </Route>
 </Routes>
 );
}

```

## Redirect with Navigate

##### Redirect as a bool status condition check

```
import {
 Routes,
 Route,
 Link,
 Navigate,
} from 'react-router-dom';

...

const About = () => {
 const shouldRedirect = true;

 return (
 <>
 <h2>About</h2>
 {shouldRedirect && <Navigate replace to="/home" />}
 </>
 );
};

```

##### Redirect by a click of a button

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

function Post() {
 const status == 200;
 const navigate = usNavigate();

 const handleClick = () => {
 navigate("/about");
 }

 return (
 <div>
 <button onClick={handleClick} >click me</button>
 </div>
 )
}

```

## Nested Routes

To have nested routes to link for example to a user page and then to the profile of the user one can simple add routes within routes.

https://reactrouter.com/en/v6.3.0/getting-started/overview look here for instructions