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, dẫn đến các chức năng trong ứng ựng reactr 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.

Cài đặt

npm isntall react-router-dom

Xem tài liệu hướng dẫn

https://reactrouter.com/web/api/Route/render-func

Sử dụng các chức năng trong react-router

Sau đây là phần giới thiệu cách dùng BrowserRouter, Route, Link và NavLink trong react-router. Khi sử dụng bạn nhớ import chúng vào ở đầu trang .js nhé.

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

Route

Trong react-router, mỗi route là 1 đường dẫn đưa 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ì thì component tương ứng sẽ được render ra trang web . Ví dụ:

<article className="main">
   <Routes>
     <Route path="/" exact element={<TrangChu/>} />
     <Route path="/gioithieu" element={<GioiThieu/>} />
     <Route path="/lienhe" element={<LienHe/>} />
     <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, còn exact để báo rằng user phải dùng chính xác route như khai báo URL thì mới hoạt động.

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

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

Link

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

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

Trong đó giá trị trong  to giống như thuộc tính href của tag a

NavLink

NavLink giống Link nhưng có thêm hai thuộc tính là activeclassname và activestyle . Các thuộc tính này giúp giúp định dạng cho link trùng khới với path.

<NavLink exact activestyle={{color:'red'}} to="/cart" className="gh">Giỏ hàng</NavLink>

BrowserRouter và HashRouter

Là thành phần giúp quy định kiểu địa chỉ. BrowserRouetr 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:

– conponents/TrangChu.js:

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

– conponents/GioHang.js:

const GioHang = () => (
    <div> <h1>Đây là trang giỏ hàng</h1> </div>
)
export default GioHang;

– conponents/ListSach.js:

const ListSach = () => (
    <div> <h1>Đây là trang list sách</h1>  </div>
);
export default ListSach;

4. Impport vào src/App.js

import TrangChu from './components/TrangChu';
import GioHang from './components/GioHang';
import ListSach from './components/ListSach';

5. Code lại function App() của App.js:

function App() {
  return (
  <BrowserRouter basename="/">
  <div className="container">
    <header>
      <nav>
        <Link to='/'>Trang chủ</Link>
        <Link to='/sach/thieunhi'>Thiếu nhi</Link>
        <Link to='/sach/nghethuatsong'>Nghệ thuật sống</Link>
        <NavLink exact activestyle={{color:'red'}} to="/cart" className="gh">Giỏ hàng</NavLink>
      </nav>
    </header>
    <main>
      <article>
        <Routes>
        <Route path='/' exact element={<TrangChu/>} />            
        <Route path='/sach/thieunhi' element={<ListSach/>} />
        <Route path='/sach/nghethuatsong' element={<ListSach/>} />
        <Route path='/cart' element={<GioHang/>} />
        </Routes>
        <input/>
      </article>
      <aside>Thông tin bổ sung</aside>
    </main>    
    <footer>FOOTER</footer>
  </div>
  </BrowserRouter>
  );
}

Định dạng : code lại App.css

* { margin: 0;}
.container { width: 1280px; margin: auto;}
header { height: 90px; background: darkcyan; position: relative;}
header nav { position: absolute; bottom: 5px; left: 10px}
header nav a { color: white;  text-decoration: none; margin-right: 10px;}
header nav a:hover { color: yellow;}
main { 
  min-height: 600px; 
  display: grid; grid-template-columns: 75% 25%;
}
main article { background: wheat; }
main aside { background: darkkhaki;}
footer { background:gray; height: 45px;
  display: flex; justify-content: center; align-items: center;
}