https://github.com/tobisamcode/react-router-v6
⚡ full react application boiler template with router version 6️⃣ features
https://github.com/tobisamcode/react-router-v6
Last synced: 9 months ago
JSON representation
⚡ full react application boiler template with router version 6️⃣ features
- Host: GitHub
- URL: https://github.com/tobisamcode/react-router-v6
- Owner: tobisamcode
- Created: 2022-08-03T18:04:53.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-08-04T08:55:14.000Z (over 3 years ago)
- Last Synced: 2023-03-10T00:56:13.747Z (about 3 years ago)
- Language: JavaScript
- Homepage:
- Size: 187 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Router 6
- index.js
```js
// import App from './App';
import App from './final/App';
```
#### Docs
[React Router Docs](https://reactrouter.com/docs/en/v6/getting-started/overview)
#### Install
```sh
npm install react-router-dom@6
```
#### First Pages
- App.js
```js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
home page} />
testing
}
/>
);
}
export default App;
```
#### Components
- App.js
```js
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
function App() {
return (
} />
} />
} />
);
}
export default App;
```
#### Links
- Home.js, About.js
```js
import { Link } from 'react-router-dom';
const Home = () => {
return (
);
};
export default Home;
```
#### Error Page
- App.js
```js
function App() {
return (
} />
} />
} />
} />
);
}
```
- Error.js
```js
import { Link } from 'react-router-dom';
const Error = () => {
return (
404
page not found
back home
);
};
export default Error;
```
#### Nested Pages
- will refactor few times
- App.js
```js
function App() {
return (
}>
} />
} />
} />
);
}
```
#### Shared Layout
- Home.js
```js
import { Link, Outlet } from 'react-router-dom';
const Home = () => {
return (
Home Page
);
};
export default Home;
```
#### Navbar
- Navbar.js
```js
import { Link } from 'react-router-dom';
const Navbar = () => {
return (
Home
About
Products
);
};
export default Navbar;
```
- Home.js
```js
import { Link, Outlet } from 'react-router-dom';
import Navbar from '../components/Navbar';
const Home = () => {
return (
<>
>
);
};
export default Home;
```
#### Index Routes
- Index routes render in the parent routes outlet at the parent route's path.
- Index routes match when a parent route matches but none of the other children match.
- Index routes are the default child route for a parent route.
- Index routes render when the user hasn't clicked one of the items in a navigation list yet.
- copy Home.js content
- SharedLayout.js
```js
import { Link, Outlet } from 'react-router-dom';
import Navbar from '../components/Navbar';
const SharedLayout = () => {
return (
<>
>
);
};
export default SharedLayout;
```
- Home.js
```js
const Home = () => {
return (
Home Page
);
};
export default Home;
```
- App.js
```js
function App() {
return (
}>
} />
} />
} />
} />
);
}
```
#### NavLink (style)
- StyledNavbar.js
```js
import { NavLink } from 'react-router-dom';
{
return { color: isActive ? 'red' : 'grey' };
}}
>
Home
;
```
#### NavLink (className)
- StyledNavbar.js
```js
(isActive ? 'link active' : 'link')}
>
Home
```
#### Reading URL Params
- App.js
```js
function App() {
return (
}>
} />
} />
} />
} />
} />
);
}
```
#### Single Product
- SingleProduct.js
```js
import { Link, useParams } from 'react-router-dom';
import products from '../data';
const SingleProduct = () => {
const { productId } = useParams();
return (
{productId}
back to products
);
};
export default SingleProduct;
```
#### Products Page
- Products.js
```js
import { Link } from 'react-router-dom';
import products from '../data';
const Products = () => {
return (
products
{products.map((product) => {
return (
{product.name}
more info
);
})}
);
};
export default Products;
```
#### Single Product
- SingleProduct.js
```js
import { Link, useParams } from 'react-router-dom';
import products from '../data';
const SingleProduct = () => {
const { productId } = useParams();
const product = products.find((product) => product.id === productId);
const { image, name } = product;
return (
{name}
back to products
);
};
export default SingleProduct;
```
#### useNavigate()
[ (?.) or Optional Chaining Explained](https://youtu.be/PuEGrylM1x8)
- App.js
```js
function App() {
const [user, setUser] = useState(null);
return (
}>
} />
} />
} />
} />
} />
} />
} />
);
}
```
- Login.js
```js
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
const Login = ({ setUser }) => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
if (!name || !email) return;
setUser({ name: name, email: email });
navigate('/dashboard');
};
```
[ (?.) or Optional Chaining Explained](https://youtu.be/PuEGrylM1x8)
- Dashboard.js
```js
const Dashboard = ({ user }) => {
return (
Hello, {user?.name}
);
};
export default Dashboard;
```
#### Protected Route
- App.js
```js
}
/>
```
- ProtectedRoute.js
```js
import { Navigate } from 'react-router-dom';
const ProtectedRoute = ({ children, user }) => {
if (!user) {
return ;
}
return children;
};
export default ProtectedRoute;
```