Site icon Bệ Phóng Việt

ReactJS Bài 3: Xây dựng trang với Layout và ReactJS Route

jphopeblog
Advertisements

Ở bài trước, chúng ta đã định nghĩa cấu trúc trang bằng cách xây dựng DefaultLayout. Trong bài này, chúng ta sẽ sử dụng DefaultLayout cho trang Home và To-do. Sau đó, dùng reactjs route để khai báo các đường link giúp điều hướng cho người sử dụng.

Bài trước: ReactJS Bài 2: Tạo Layout giao diện cho ứng dụng

Tạo trang Home

Bước đầu tiên, bạn hãy tạo thư mục src/screens vằ đặt file Home.js với nội dung như dưới đây:

import React, { Component } from 'react';
import DefaultLayout from '../layouts/DefaultLayout';

class Home extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
    
    };
  }

  render() {
    return (
      <DefaultLayout title="Home">
        <h3>Welcome to my-reactjs app!</h3>
      </DefaultLayout>
    );
  }
}

export default Home;

Trang Home (hay chính là component Home) sử dụng component DefaultLayout và truyền vào các giá trị title và toàn bộ các thẻ và nội dung con (children).

Thêm component Home vào src/App.js:

...
import Home from './screens/Home'; // thêm import 
function App() {
  return (
    <div className="container">
      <Home /> <!-- thêm component home để hiển thị mặc định khi vào app  -->
    </div>
  );
}
export default App;
Tại thư mục gốc của dự án, chạy npm start nếu bạn vẫn chưa chạy trước đó. Vào trình duyệt và bạn sẽ thấy nội dung của app như sau:

Tạo trang To-do

Ở bài này, chúng ta sẽ tạo 1 trang To-do đơn giản. Ở các bài sau, chúng ta sẽ học cách lấy dữ liệu từ server backend, hiển thị các to-do, và cách tạo các to-do mới.

Tạo TodoList.js trong thư mục src/screens với đoạn code sau:

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function TodoList() {
  return (
    <div>
      <h1>Todo List</h1>
      <ul>
        <li>Task 1</li>
        <li>Task 2</li>
        <li>Task 3</li>
      </ul>
      <button className="btn btn-primary">Add Task</button>
    </div>
  );
}

export default TodoList;

Hiện tại, bạn sẽ thấy là không có cách nào để truy nhập vào trang To-do. Đó là vì chúng ta phải khai báo các đường dẫn của ứng dụng trước đã. Chúng ta sẽ thực hiện việc này bằng các sử dụng Route của ReactJS

Khai báo điều hướng với ReactJS Route

Để ứng dụng điều Huớng người sử dụng tới đúng screens mà chúng ta đã tạo, chúng ta cần khai báo đường dẫn tới mỗi screen/component đó. Trong ReactJS, chúng ta có thể sử dụng các component của router dom.

Trong ứng dụng này, bạn phải chú ý là chúng ta sẽ dùng phiên bản 6+ của router dom. Cài đặt router dom bằng câu lệnh sau trên terminal:

npm i react-router-dom@6.6.1

Hiện tại, ứng dụng của chúng ta chỉ có 2 route: trang Home, và trang To-do. Mở file index.js ở thư mục gốc của dự án vào thay thế đoạn code hiện tại với đoạn code sau:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './screens/Home';
import TodoList from './screens/TodoList';
//import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/home" element={<Home />} />
      <Route path="/to-do" element={<TodoList />} />
    </Routes>
  </BrowserRouter>
);

reportWebVitals();

Chú ý, các đường link / và to-do đã được khai báo ở component MenuBar ở bài trước.

Học thêm về ReactJS Router Dom

Bạn có thể tham khảo tại đây.

Bài tiếp theo

Áp dụng 1 layout khác cho màn hình đăng nhập: ReactJS Bài 4: Login layout và xử lý đăng nhập

Exit mobile version