Giới thiệu React Router

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