Bài viết được sự cho phép của tác giả Lưu Bình An
Giới thiệu về React Router
Cách tiếp cận của React Router không khác mấy so với các thư viện Router trước đây
Ví dụ với 1 component Home
class Home extends React.Component{
render(){
return(
<h1>Welcome Home</h1>;
)
}
}
ReactDOM.render( (<Home/>), document.getElementById('root'));Sử dụng với React-Router
ReactDOM.render((
<Router>
<Route path="/" component={Home} />
</Router>
), document.getElementById('root'));Câu khai báo trên có thể diễn giải là với route “/” (tương đương với trang chủ), thì gọi render component Home
2 component <Router> và <Route> là những component React không render trong DOM, nếu path khớp với uri, nó render ra component chúng ta truyền vào cho nó (qua props component), chúng ta sẽ gặp lại khái niệm này thường xuyên: Một component bản thân không render trong DOM, mà render một component khác
Xem thêm tuyển dụng lập trình viên React lương cao
Nhiều Route
Xét ví dụ
ReactDOM.render((
<Router>
<Route path="/" component={Home}></Route>
<Route path="/tags" component={TagsPage}></Route>
<Route path="/post/:id" component={Post}></Route>
</Router>
), document.getElementById('root'));- Với URL yourpage.com/ -> render component
Home - Với URL yourpage.com/tags -> render component
TagsPage - Với URL yourpage.com/post/12 -> render component
Post
Tái sử dụng component với Nested Route
Khai báo nested Route
ReactDOM.render((
<Router>
<Route component={MainLayout}>
<Route component={SearchLayout}>
<Route path="users" component={UserList} />
</Route>
</Route>
</Router>
), document.getElementById('root'));Khi user truy cập đường dẫn /users, React Router sẽ render component <UserList /> bên trong component <SearchLayout/>, cả 2 component này lại đặt trong component <MainLayout/>
Nếu muốn trang chủ cũng render <MainLayout/> cùng với component <Home/>
ReactDOM.render((
<Router>
<Route component={MainLayout}>
<Route path="/" component={Home} />
<Route component={SearchLayout}>
<Route path="users" component={UserList} />
<Route path="widgets" component={WidgetList} />
</Route>
</Route>
</Router>
), document.getElementById('root'));IndexRoute
Thay vì viết như trên, có thể sử dụng component IndexRoute cũng cho cũng kết quả
ReactDOM.render((
<Router>
<Route path="/" component={MainLayout}>
<IndexRoute component={Home} />
<Route component={SearchLayout}>
<Route path="users" component={UserList} />
<Route path="widgets" component={WidgetList} />
</Route>
</Route>
</Router>
), document.getElementById('root'));Một số cách khai báo với Route
Nếu có một khai báo cho trang User như bên dưới
<Route path="user/settings" component={UserSettings} />
<Route path="user/inventory" component={UserInventory} />
<Route path="user/orders" component={UserOrders} />Viết lại cho gọn
<Route path="user">
<Route path="settings" component={UserSettings} />
<Route path="inventory" component={UserInventory} />
<Route path="orders" component={UserOrders} />
</Route>Cần bổ sung thêm component cho trang /user
<Route path="user">
<IndexRoute component={UserProfile} />
<Route path="settings" component={UserSettings} />
<Route path="inventory" component={UserInventory} />
<Route path="orders" component={UserOrders} />
</Route>Sử dụng Link component, đừng sử dụng tag a
Khi đã định nghĩa với Route, nếu muốn dẫn đến một route nào đó, sử dụng component <Link to="" /> thay cho tag <a/>
<div className="app">
<header className="primary-header"></header>
<aside className="primary-aside">
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/user">Users</Link></li>
<li><Link to="/user/settings">Settings</Link></li>
</ul>
</aside>
<main>
{this.props.children}
</main>
</div>Với <Link> nó biết khi nào đang active
<Link to="/users" activeClassName="active">Users</Link>Browser History
<Router> muốn hoạt động được, phải khai báo với ReactRouter.browserHistory
var browserHistory = ReactRouter.browserHistory;
ReactDOM.render((
<Router history={browserHistory}>
</Router>
), document.getElementById('root'));Những version trước đây của React Router, attribute history có giá trị mặc định là hashHistory giống như router của Backbone.js, các version sau này, attribute history sẽ không có giá trị mặc định và bắt buộc phải khai báo khi sử dụng
Nếu muốn redirect user đến một route nào đó
browserHistory.push('/some/path');Route với parameter string
<Route path="users/:userId" component={UserProfile} />Component UserProfile sẽ được render trong các trường hợp: users/1, users/145, users/abc, React Router sẽ truyền vào giá trị userId vào UserProfile như một props, access đến giá trị này bằng this.props.params.userId
Bài viết gốc được đăng tải tại vuilaptrinh.com
Có thể bạn quan tâm:
- 5 sai lầm thường thấy khi viết react component
- Giới thiệu về Reactive Programing trong javascript
- Các Laravel route tips giúp bạn cải thiện routing
Xem thêm Việc làm it job hấp dẫn trên TopDev
