I built it to help me understand how to use React Router V6.
- React Router is the most popular way to add page routing in React Apps. It is used very frequently in React projects.
npm install react-router-dom@6- App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<div>home page</div>} />
<Route
path="testing"
element={
<div>
<h2>testing </h2>
</div>
}
/>
</Routes>
</BrowserRouter>
);
}
export default App;- App.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 (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="products" element={<Products />} />
</Routes>
</BrowserRouter>
);
}
export default App;- Home.js, About.js
import { Link } from 'react-router-dom';
const Home = () => {
return (
<div>
<h2>Home Page</h2>
<Link to='/about' className='btn'>
About
</Link>
<a href="">
</div>
);
};
export default Home;- App.js
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="products" element={<Products />} />
<Route path="*" element={<Error />} />
</Routes>
</BrowserRouter>
);
}- Error.js
import { Link } from "react-router-dom";
const Error = () => {
return (
<section className="section">
<h2>404</h2>
<p>page not found</p>
<Link to="/">back home</Link>
</section>
);
};
export default Error;-
will refactor few times
-
App.js
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}>
<Route path="about" element={<About />} />
<Route path="products" element={<Products />} />
<Route path="*" element={<Error />} />
</Route>
</Routes>
</BrowserRouter>
);
}- Home.js
import { Link, Outlet } from "react-router-dom";
const Home = () => {
return (
<section className="section">
<h2>Home Page</h2>
<Outlet />
</section>
);
};
export default Home;- Navbar.js
import { Link } from "react-router-dom";
const Navbar = () => {
return (
<nav className="navbar">
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/products">Products</Link>
</nav>
);
};
export default Navbar;- Home.js
import { Link, Outlet } from "react-router-dom";
import Navbar from "../components/Navbar";
const Home = () => {
return (
<>
<Navbar />
<section className="section">
<Outlet />
</section>
</>
);
};
export default Home;-
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
import { Link, Outlet } from "react-router-dom";
import Navbar from "../components/Navbar";
const SharedLayout = () => {
return (
<>
<Navbar />
<section className="section">
<Outlet />
</section>
</>
);
};
export default SharedLayout;- Home.js
const Home = () => {
return (
<section className="section">
<h2>Home Page</h2>
</section>
);
};
export default Home;- App.js
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<SharedLayout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="products" element={<Products />} />
<Route path="*" element={<Error />} />
</Route>
</Routes>
</BrowserRouter>
);
}- StyledNavbar.js
import { NavLink } from "react-router-dom";
<nav className="navbar">
<NavLink
to="/about"
style={({ isActive }) => {
return { color: isActive ? "red" : "grey" };
}}
>
Home
</NavLink>
</nav>;- StyledNavbar.js
<nav className="navbar">
<NavLink
to="/"
className={({ isActive }) => (isActive ? "link active" : "link")}
>
Home
</NavLink>
</nav>- App.js
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<SharedLayout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="products" element={<Products />} />
<Route path="products/:productId" element={<SingleProduct />} />
<Route path="*" element={<Error />} />
</Route>
</Routes>
</BrowserRouter>
);
}- SingleProduct.js
import { Link, useParams } from "react-router-dom";
import products from "../data";
const SingleProduct = () => {
const { productId } = useParams();
return (
<section className="section product">
<h2>{productId}</h2>
<Link to="/products">back to products</Link>
</section>
);
};
export default SingleProduct;- Products.js
import { Link } from "react-router-dom";
import products from "../data";
const Products = () => {
return (
<section className="section">
<h2>products</h2>
<div className="products">
{products.map((product) => {
return (
<article key={product.id}>
<h5>{product.name}</h5>
<Link to={`/products/${product.id}`}>more info</Link>
</article>
);
})}
</div>
</section>
);
};
export default Products;- SingleProduct.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 (
<section className="section product">
<img src={image} alt={name} />
<h5>{name}</h5>
<Link to="/products">back to products</Link>
</section>
);
};
export default SingleProduct;(?.) or Optional Chaining Explained
- App.js
function App() {
const [user, setUser] = useState(null);
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<SharedLayout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="products" element={<Products />} />
<Route path="products/:productId" element={<SingleProduct />} />
<Route path="login" element={<Login setUser={setUser} />} />
<Route path="dashboard" element={<Dashboard user={user} />} />
<Route path="*" element={<Error />} />
</Route>
</Routes>
</BrowserRouter>
);
}- Login.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
- Dashboard.js
const Dashboard = ({ user }) => {
return (
<section className="section">
<h4>Hello, {user?.name}</h4>
</section>
);
};
export default Dashboard;- App.js
<Route
path="dashboard"
element={
<ProtectedRoute user={user}>
<Dashboard user={user} />
</ProtectedRoute>
}
/>- ProtectedRoute.js
import { Navigate } from "react-router-dom";
const ProtectedRoute = ({ children, user }) => {
if (!user) {
return <Navigate to="/" />;
}
return children;
};
export default ProtectedRoute;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent