https://github.com/sharif-minhaz/multi-routing-blog-app

A simple react project with react-router-dom to explore
https://github.com/sharif-minhaz/multi-routing-blog-app

react-router-dom routing

Last synced: 1 day ago
JSON representation

A simple react project with react-router-dom to explore

• Host: GitHub
• URL: https://github.com/sharif-minhaz/multi-routing-blog-app
• Owner: Sharif-Minhaz
• Created: 2022-07-24T19:40:55.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-24T19:56:13.000Z (over 2 years ago)
• Last Synced: 2023-03-05T20:14:32.256Z (over 1 year ago)
• Topics: react-router-dom, routing
• Language: JavaScript
• Homepage:
• Size: 309 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### React routing with `react-router-dom` (6.3.0)

---

#### Created routes

1. / (home route)

2. /about (about route)

3. /contact (contact route)

4. /blog (blog route with sub routes and dynamic routes)

5. /add-blog (protected route)

6. /use (query and search params route )

7.  - (error route)

#### Wrap the entire components that require routing with `BrowserRouter`

```jsx

	 {/* Nav component */}

	 {/* Routes component */}

```

#### Create Nav links

Note: Here we use NavLink instead of Link component. Because it will give us the chance to style the active link 


```js

const toggle = () => {

	setIsLoggedIn(!isLoggedIn);

};

```

```jsx

	


		Home

		About

		Contact

		Blog

		{isLoggedIn && Add-Blog} {/* Protected route link */}

		User

	


	{isLoggedIn ? (

		Logout

	) : (

		Login

	)}

```

#### Create `Routers` components with protected route

```jsx

// How does protected route works

import React from "react";

import { Navigate } from "react-router-dom";

const Protected = ({ isLoggedIn, children }) => {

	if (!isLoggedIn) {

		return ;

	}

	return children;

};

export default Protected;

```

```jsx

	} />

	} />

	} />

	} />

	} /> {/* dynamic routes */}

	

				

			

		}

	/>

	} />

	} />

```

#### Handle params and search params

```js

// /user/?name=minhaz&age=22

const [queryParams, setQueryParams] = useSearchParams();

// get query params

queryParams.get("name"); // minhaz

queryParams.get("age"); // 22

// set query params

setQueryParams({ name: "John", age: 33 }); // /user/?name=John&age=33

```