Quartz 🪬

Basic Usage of React Router

3 min read

Router

Để sử dụng React Router, ta cần bao quanh toàn bộ ứng dụng bằng một router. Có rất nhiều loại router, BrowserRouter là loại thường được sử dụng nhất trong các ứng dụng Web.

Về bản chất, BrowserRouter là một context provider.

// Existing import ...
import { BrowserRouter as Router } from "react-router-dom"
 
const root = createRoot(document.getElementById("root"))
root.render(
  <StrictMode>
    <Router>
      <App />
    </Router>
  </StrictMode>,
)

Có thể đổi tên BrowserRouter thành Router để code trở nên dễ đọc.

Route

Một route ở trong React Router sẽ bao gồm một đường dẫn và một component. Ta định nghĩa một route bằng component Route như sau:

import { Routes, Route } from "react-router-dom"
 
function Home() {
  return <h2>Home</h2>
}
 
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
    </Routes>
  )
}

Có thể thấy, component Route nhận vào hai props:

  • path: đường dẫn của route ("/").
  • element: component của route (Home). Giá trị truyền vào cũng có thể là một JSX element.

Important

Bắt buộc phải có component Routes bao bên ngoài các component Route.

Component Routes có thể chứa nhiều component Route:

function BookList() {
  return <h2>BookList</h2>
}
 
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/books" element={<BookList />} />
    </Routes>
  )
}

Nếu chạy ứng dụng ở localhost, các component có thể được truy cập thông qua các đường dẫn sau:

  • http://localhost:3000/
  • http://localhost:3000/books

Tất nhiên là chúng ta sẽ không muốn nhập các đường dẫn một cách thủ công.

Component Link của React Router giúp chúng ta tạo ra các liên kết đến các component.

  • Về bản chất, Link cũng dùng thẻ <a> ở bên dưới. Tuy nhiên, click vào các liên kết này không làm refresh lại trang web.
  • Link nhận một props bắt buộc là to có giá trị là đường dẫn của route cần liên kết.

Ta thiết lập liên kết cho các route ở trên như sau:

import { Routes, Route, Link } from 'react-router-dom'
// ...
 
function NavBar() {
	return (
		<ul>
			<li>
				<Link to="/">Home</Link>
			</li>
			<li>
				<Link to="/books">Books</Link>
			</li>
		</ul>
	)
}
 
function App() {
	return (
		<NavBar />
		<Routes>
			<Route path="/" element={<Home />} />
			<Route path="/books" element={<BookList />} />
		</Routes>
	)
}

Not Found

Nếu không tìm thấy route, trang Web sẽ không render ra gì cả. Trong trường hợp đó, ta cần tạo ra một route có tên là NotFound để thông báo cho người dùng trang mà họ đang tìm kiếm không tồn tại.

function NotFound() {
  return <h1>The page your looking for is not found</h1>
}

Đường dẫn của component NotFound sẽ là *:

<Route path="*" element={<NotFound />} />

Khi dùng "*", route sẽ được match với tất cả các path còn lại trừ path của các route đã được định nghĩa.

Resources

Backlinks