() translation by (you can also view the original English article)
React là một thư viện JavaScript được xây dựng bởi Facebook để xây dựng giao diện người dùng. Nếu bạn là người mới làm quen với React, tôi khuyên bạn nên đọc một bài hướng dẫn trước đó của chúng tôi về làm quen với React. Trong hướng dẫn này, chúng ta sẽ thảo luận cách làm thế nào để xử lý định tuyến lồng nhau trong một ứng dụng web React.
Thiết lập ứng dụng
Chúng ta sẽ bắt đầu bằng cách thiết lập ứng dụng web React của chúng ta. Hãy tạo ra một thư mục dự án gọi là ReactRouting. Bên trong ReactRouting, tạo ra một tập tin gọi là app.html. Dưới đây là tập tin app.html:
1 |
<html>
|
2 |
|
3 |
<head>
|
4 |
<title>TutsPlus - React Nested Routing</title> |
5 |
</head>
|
6 |
|
7 |
<body>
|
8 |
<div id="app"></div> |
9 |
<script src="bundle.js"></script> |
10 |
</body>
|
11 |
|
12 |
</html>
|
Bên trong thư mục ReactRouting, khởi tạo dự án sử dụng Node Package Manager (NPM).
1 |
npm init |
Nhập chi tiết dự án hoặc nhấn Enter để chấp nhận mặc định, và bạn cần phải có tập tin package.json bên trong thư mục ReactRouting.
1 |
{
|
2 |
"name": "reactroutingapp", |
3 |
"version": "1.0.0", |
4 |
"description": "", |
5 |
"main": "app.js", |
6 |
"scripts": { |
7 |
"test": "echo \"Error: no test specified\" && exit 1" |
8 |
},
|
9 |
"author": "", |
10 |
"license": "ISC" |
11 |
}
|
Cài đặt các phụ thuộc react và react-dom sử dụng npm.
1 |
npm install react react-dom --save |
Cài đặt gói babel sử dụng npm và lưu nó vào tập tin package.json.
1 |
npm install --save-dev webpack-dev-server webpack babel-core babel-loader babel-preset-react babel-preset-es2015 |
Gói babel được yêu cầu để biến đổi mã JSX thành JavaScript. Tạo một tập tin cấu hình webpack để xử lý các cấu hình webpack. Tập tin webpack.config.js sẽ trông giống như thế này:
1 |
module.exports = { |
2 |
entry: './app.js', |
3 |
|
4 |
output: { |
5 |
filename: 'bundle.js', |
6 |
},
|
7 |
|
8 |
module: { |
9 |
loaders: [ |
10 |
{ exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' } |
11 |
]
|
12 |
}
|
13 |
}
|
Code React của chúng ta sẽ nằm trong tập tin app.js. Vì vậy hãy tạo một tập tin gọi là app.js bên trong thư mục ReactRouting. Nhập các thư viện react cần thiết trong app.js. Tạo một thành phần được gọi là App có một div với một số văn bản. Kết xuất thành phần sử dụng phương thức render. Tập tin app.js cơ bản sẽ trông giống như sau:
1 |
import React from 'react' |
2 |
import { render } from 'react-dom' |
3 |
|
4 |
const App = () => { |
5 |
return ( |
6 |
<h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2> |
7 |
);
|
8 |
};
|
9 |
|
10 |
render(( |
11 |
<App /> |
12 |
),document.getElementById('app')) |
Khởi động lại máy chủ phát triển webpack.
1 |
webpack-dev-server |
Một khi máy chủ đã được khởi động lại, bạn sẽ có thể xem ứng dụng React chạy trên http://localhost:8080/.
Xử lý định tuyến trong React
Chúng ta sẽ tận dụng react-router để thực hiện định tuyến và định tuyến lồng nhau. Đầu tiên, cài đặt react-router trong dự án của chúng ta.
1 |
npm install react-router --save |
Bây giờ chúng ta có react-router được cài đặt trong dự án của chúng ta. Hãy tạo ra một vài view để thực hiện định tuyến. Bên trong tập tin app.js, tạo ra hai thành phần được gọi là view1 và View2. Code sẽ trông giống như sau:
1 |
const View1 = () => { |
2 |
return( |
3 |
<h3>{'Welcome to View1'}</h3> |
4 |
);
|
5 |
};
|
6 |
|
7 |
const View2 = () => { |
8 |
return( |
9 |
<h3>{'Welcome to View2'}</h3> |
10 |
);
|
11 |
};
|
Tạo một thành phần Menu để hiển thị View1 và View2 khi nhấp vào. Nó sẽ trông giống như dưới đây:
1 |
const Menu = () => { |
2 |
return( |
3 |
<section> |
4 |
|
5 |
<ul> |
6 |
<li>{'Home'}</li> |
7 |
<li> |
8 |
<Link to="/view1">{'View1'}</Link> |
9 |
</li> |
10 |
<li> |
11 |
<Link to="/view2">{'View2'}</Link> |
12 |
</li> |
13 |
</ul> |
14 |
</section> |
15 |
)
|
16 |
};
|
Hãy sử dụng react router để hiển thị tuyến mặc định cho ứng dụng của chúng ta. Làm cho thành phần Menu thành tuyến mặc định. Đồng thời xác định tuyến cho các thành phần View1 và View2. Nó sẽ trông giống như dưới đây:
1 |
render( |
2 |
<Router history={hashHistory}> |
3 |
<Route component={Menu} path="/"></Route> |
4 |
<Route component={View1} path="/view1"></Route> |
5 |
<Route component={View2} path="/view2"></Route> |
6 |
</Router>, |
7 |
document.getElementById('app')); |
Lưu các thay đổi trên và khởi động lại máy chủ webpack. Bạn sẽ có menu dọc hiển thị tại http://localhost:8080/webpack-dev-server/.
Hãy thử nhấp vào liên kết View1 và View2, và nó sẽ điều hướng đến các thành phần thích hợp.
Các tuyến lồng nhau trong React
Chúng ta đã có một thành phần App, hiển thị văn bản tiêu đề. Giả sử chúng ta muốn menu nhấn vào để hiển thị view thích hợp, nhưng chúng ta muốn nó được kết xuất bên trong thành phần App.
Chúng ta muốn Menu điều hướng có sẵn trên tất cả các trang. Để đạt được điều này, chúng ta sẽ cố gắng lồng các thành phần View1 và View2 của chúng ta bên trong thành phần App. Vì vậy, bất cứ khi nào View1 được kết xuất, nó sẽ được hiển thị bên trong thành phần App.
Bây giờ thay đổi cấu hình router và đặt các cấu hình định tuyến View1 và View2 bên trong tuyến App.
1 |
render( |
2 |
<Router history={hashHistory}> |
3 |
<Route component={App} path="/"> |
4 |
<Route component={View1} path="/view1"></Route> |
5 |
<Route component={View2} path="/view2"></Route> |
6 |
</Route> |
7 |
</Router>, |
8 |
document.getElementById('app')); |
Sửa đổi thành phần App để lồng thành phần Menu bên trong nó.
1 |
const App = () => { |
2 |
return ( |
3 |
<div> |
4 |
<h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2> |
5 |
<Menu /> |
6 |
</div> |
7 |
);
|
8 |
};
|
Để kết xuất các tuyến được lồng bên trong thành phần App, chúng ta sẽ thêm props.children vào thành phần App. Truyền props vào như là một đối số của hàm vào thành phần App.
1 |
const App = (props) => { |
2 |
return ( |
3 |
<div> |
4 |
<h2>{'TutsPlus - Welcome to React Nested Routing App'}</h2> |
5 |
<Menu /> |
6 |
{props.children} |
7 |
</div> |
8 |
);
|
9 |
};
|
Đồng thời hãy bổ sung thành phần Home vào ứng dụng của chúng ta.
1 |
const Home = () => { |
2 |
return( |
3 |
<div> |
4 |
<h3>{'Welcome Home !!'}</h3> |
5 |
</div> |
6 |
|
7 |
);
|
8 |
};
|
Bao gồm thành phần Home trong danh sách các tuyến lồng bên trong.
1 |
render( |
2 |
<Router history={hashHistory}> |
3 |
<Route component={App} path="/"> |
4 |
<Route component={Home} path="/home"></Route> |
5 |
<Route component={View1} path="/view1"></Route> |
6 |
<Route component={View2} path="/view2"></Route> |
7 |
</Route> |
8 |
</Router>, |
9 |
document.getElementById('app')); |
Lưu các thay đổi trên và khởi động lại máy chủ, và bạn sẽ có thể xem ứng dụng. Bấm vào các mục menu được liệt kê, và mỗi khi nhấp vào sẽ kết xuất thành phần lồng bên trong thành phần App.
Tổng kết
Trong hướng dẫn này, bạn đã học được cách làm thế nào để thực hiện định tuyến lồng nhau trong một ứng dụng React sử dụng react-router. Bạn có thể phát triển các thành phần độc lập nhỏ và sau đó sử dụng các thành phần để tạo ra các ứng dụng lớn hơn. Khả năng chuyển lên từ các thành phần nhỏ sang các ứng dụng lớn là những thứ làm cho React thật sự mạnh mẽ.
React đang trở thành một trong những nền tảng mạnh mẽ để làm việc trên web. Nhưng sẽ không là gì nếu không tiếp tục tìm hiểu, và có rất nhiều nguồn tài liệu để giúp nâng cao kiến thức của bạn về React. Nếu bạn đang tìm kiếm thêm các nguồn tài nguyên để học hoặc để sử dụng trong công việc của bạn, hãy kiểm tra những gì chúng tôi có sẵn trên Envato Market.
Mã nguồn từ hướng dẫn này có sẵn trên GitHub. Hãy cho chúng tôi biết ý kiến và suy nghĩ của bạn trong phần bình luận dưới đây nhé.
