Sử dụng React router

Sử dụng react router hướng dẫn bạn cách tạo ra các đường dẫn đến các chức năng trong ứng dụng react của mình.

---

Giới thiệu react-router

React-router là thư viện để tạo ra đường dẫn (route) cho các chức năng trong ứng dụng React. Thư viện này giúp tạo các ứng sụng SPA rất hay.

Cài đặt react-router

Trong folder project, chạy lệnh sau:

npm isntall react-router-dom

Tài liệu hướng dẫn sử dụng react-router

Vào địa chỉ này để xem cách sử dụng (nếu muốn) https://reactrouter.com/

Sử dụng react-router

ReacrRouter có nhiều component mà bạn cần import vào để dùng. Ví dụ

import { BrowserRouter, Routes, Route, NavLink, Navigate  } from "react-router-dom";

Routes

Là nơi khai báo các Route trong đó, mỗi Route là một khai báo đường dẫn cho 1 component trong ứng dụng của bạn.

<Routes>
...
</Routes>

Route

Mỗi Route là 1 đường dẫn đưa người dùng vào một chức năng nào đó trong ứng dụng, thường là dẫn vào một component. Nghĩa là khi user truy cập theo đường dẫn bạn khai báo thì component tương ứng sẽ được render ra trang web.

<article className="main">
   <Routes>
     <Route path="/" element={<TrangChu/>} />
     <Route path="/gioithieu" element={<GioiThieu/>} />
     <Route path="/lienhe" element={<LienHe/>} />
     <Route path='/sach/:id' element={<Sach/>} />      
     <Route element={<NotFound/>}/>
   </Routes>
</article>

Trong đó path là đường dẫn trên URL tùy ý bạn đặt, element là component sẽ được render để hiện dữ liệu cho user xem. Trong path có thể dùng diễn tả tham số sau dấu : (trong ví dụ trên là tham số id) . Khi đó trong component có thể dùng useParams() để lấy giá trị tham số vào để dùng, tham khảo ví dụ sau:

//Sach.js
import { useParams } from "react-router-dom";
const Sach = () => {
    let { id  } = useParams(); 
    return( ...)  
}

Trong một route, bạn cũng có thể chạy thực thi 1 function xử lý trước khi trả kết quả cho user:

<Route path="/download" element={ dangNhapChua ? <DownLoad/>: <Navigate to="/"/>}/>

NavLink

Khi đã cài react-router, bạn dùng thẻ <NavLink> để tạo các link cho ứng dụng, lệnh <NavLink sẽ tạo tag <a> cho bạn và khi nhắp vào sẽ không nạp lại toàn trang. Thường dùng <NavLink> để tạo thanh menu. link. Ví dụ

<NavLink to="/">Trang chủ</NavLink>
<NavLink to="/lienhe">Liên hệ </NavLink>
<NavLink to="/giothieu">Giới thiệu </NavLink>

Trong đó giá trị trong  to giống như thuộc tính href của tag a, giá trị của to là các đường path bạn đã khai báo trong Routes

Khi chạy ứng dụng, user chọn NavLink nào thì nó được tự động bổ sung class active. Bạn có thể tạo class .active để định dạng cho mục đang được chọn.

BrowserRouter và HashRouter

Là thành phần giúp quy định kiểu địa chỉ. BrowserRouter dùng địa chỉ con kiểu như http://localhost:3000/lienhe  còn HashRouter thì dùng địa chỉ con ở sau  dấu # như http://localhost:3000/#/lienhe

Demo sử dụng React Router

1. Tạo project mới

2. Chuyển  vào folder và cài đặt thư viện react-router-dom

npm isntall react-router-dom

3. Tạo folder components và tạo 3 components trong đó như sau:

– src/TrangChu.js

const TrangChu = () => (
    <div> <h1>Đây là thông tin ở trang chủ</h1>  </div>
);
export default TrangChu;

– src/Download.js

const Download = () => (
    <div> <h1>Đây là trang download soft</h1>  </div>
);
export default Download;

– src/Sach.js

import { useParams } from "react-router-dom";
const Sach = () => {
    let { id  } = useParams(); 
    return(
      <div> <h1>Đây là trang chi tiết của sách {id} </h1> </div>
    )  
}
export default Sach;

– src/SachTrongLoai.js

import { useParams } from "react-router-dom";
const SachTrongLoai = () => {
    let { id, pagenum = 1 } = useParams(); 
    return(
    <div> 
     <h1>Đây là trang liệt kê sách trong 1 loại {id} {pagenum}</h1>  
    </div>
    )
};
export default SachTrongLoai;

4. Impport vào src/App.js

import TrangChu from './TrangChu';
import SachTrongLoai from './SachTrongLoai';
import Sach from './Sach';
import { BrowserRouter , NavLink, Routes, Route, Navigate } from 'react-router-dom';

5. Code function App

function App() {
  let dangNhapChua=false;
  return (
  <BrowserRouter basename="/">
  <div className="container">
    <nav>
      <NavLink to='/' exact  className="hone" >Trang chủ</NavLink>
      <NavLink to='/loai/thieunhi'>Thiếu nhi</NavLink>
      <NavLink to='/loai/nghethuatsong'>Nghệ thuật sống</NavLink>
    </nav>
    <main>
    <Routes>
      <Route path='/' element={<TrangChu/>} />            
      <Route path='/sach/:id' element={<Sach/>} />      
      <Route path='/loai/:id/:pagenum?' element={<SachTrongLoai/>} />
      <Route path="/download" 
      element={dangNhapChua? <Download/>:<Navigate to="/"/>} />
    </Routes>
    </main>
    <input/>
  </div>
  </BrowserRouter>
  );
}
export default App;

Định dạng: App.css

.container { width: 1200px; margin: auto;}
.container > nav { height: 45px; background: darkcyan; display: flex; align-items: center;  }
.container > nav a { color: white;  text-decoration: none; margin-right: 10px;}
.container > main { min-height: 400px; background-color: lightgoldenrodyellow; }
.container nav .active { color: orange; font-weight: bold; font-size: 1.1em;}