React Router

• React router là một thư viện routing mạnh, nó giúp bạn thêm screen và follow vào trong ứng dụng của bạn một cách nhanh chóng. Nó giúp cho việc đồng bộ giữa URL và những component được load vào hiển thị trên trang

• Không giống như những thư viện khác React router sử dụng JSX

• Home component:

    var Home = React.createClass({
      render: function() {
        return (<h1>Welcome to the Home Page</h1>);
      }
    });

    ReactDOM.render((
      <Home />
    ), document.getElementById('root'));

• Home component được render với React Router

    ReactDOM.render((
      <Router>
        <Route path="/" component={Home} />
      </Router>
    ), document.getElementById('root'));

• Chú ý <Router> and <Route> là khác nhau, chúng là 2 component trong React. <Router> được render tới 'root' khi access root url của ứng dụng. Home component sẽ được render.

II.1. multiple routes

• React router được thể hiện rõ rệt khi sử dụng multiple routes để định nghĩa component nào được render dựa trên path hiện tại được click.

    ReactDOM.render((
      <Router>
        <Route path="/" component={Home} />
        <Route path="/users" component={Users} />
        <Route path="/widgets" component={Widgets} />
      </Router>
    ), document.getElementById('root'));

• Mỗi một <Route> sẽ renders component của riêng nó khi path của route match với URL. Như ví dụ trên thì chỉ có duy nhất Home component được render mỗi khi ta access vào root app.

II.2. nested routes

• Làm thế nào để lồng các component lại với nhau? Router sẽ giúp ta làm điều đó khi lồng routes.

    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'));

• Component sẽ được lồng phù hợp với routes. Khi user truy cập vào /users React router sẽ đặt UserList component trong SearchLayout component sau đó cả 2 sẽ được đặt trong MainLayout component . Cuối cùng khi user truy cập vào /users 3 components lồng nhau sẽ được show ra bên trong root component.

• <Route component={SearchLayout}> có 2 components con, user có thể access vào /users hoặc /widgets thì <Route> tương ứng sẽ load các các component vào trong SearchLayout component.

• Chú ý rằng Home component được đặt trực tiếp bên trong MainLayout mà không có SearchLayout khi được gọi bởi vì <Route> là lồng nhau.

II.3. Routes attributes

• Đôi khi <Route> sẽ có component mà không có path attribute, Giống như SearchLayout ở trên

    <Route path="product/settings" component={ProductSettings} />
    <Route path="product/inventory" component={ProductInventory} />
    <Route path="product/orders" component={ProductOrders} />

• Phần product bị lặp lại 3 lần trong 3 routes ta có thể viết lại như sau

    <Route path="product">
        <Route path="settings" component={ProductSettings} />
        <Route path="inventory" component={ProductInventory} />
        <Route path="orders" component={ProductOrders} />
    </Route>

• product cũng có thể render component của riêng nó khi user access vào /product Ví dụ trên được viết lại như sau :

    <Route path="product">
      <IndexRoute component={ProductProfile} />
      <Route path="settings" component={ProductSettings} />
      <Route path="inventory" component={ProductInventory} />
      <Route path="orders" component={ProductOrders} />
    </Route>

II.4. sử dụng <Link> thay vì <a>

• Khi tạo anchors cho routes bạn cần phải sử dụng <Link to=””> thay vì dùng <a href””>`

• Khi sử dụng <Link> component React Route cơ bản sẽ cho bạn một anchor trong DOM.

• Thêm một vào link anchors vào MainLayout:

    <Link to="/users" className="users">

• Trên DOM HTML

    <a href="/users" class="users">

II.5. Active link

• Một tính năng khá là cool của Link đó là biết được khi nào thì link active

    <Link to="/users" activeClassName="active">Users</Link>

• Nếu một user đang access vào path /users/, Router sẽ update class active của components

II.6. browser history

• React router cần phải biết được history tracking nào để sử dụng, browser history sẽ được implement như sau:

    var browserHistory = ReactRouter.browserHistory;

    ReactDOM.render((
      <Router history={browserHistory}>
        ...
      </Router>
    ), document.getElementById('root'));

• Ở những version trước của React Router, history attributes không được require và sử dụng hashHistory làm mặc định. Nó sử dụng # trên url để quản lý SPA routing. Theo cách cũ với hashHistory url sẽ như sau:

    example.com
    example.com/#/users?_k=ckuvup
    example.com/#/widgets?_k=ckuvup

• Nhưng khi sử dụng browserHistory:

            example.com
            example.com/users
            example.com/widgets

• Chú ý browserHistory chỉ hoạt động trên front-end. Giả sử khi bạn vào trang example.com sau đó click vào /users thì React router sẽ xử lý và render User component và trên url sẽ hiển thị như sau example.com/users thế nhưng nếu bạn refresh url này trên trình duyệt thì request sẽ gửi tới server React Router sẽ không được handle trong trường hợp này và nếu server side không có route cho url đó kết quả là bạn sẽ nhận được response 404.
• để giải quyết vấn đề 404 này từ server ta sử dụng wildcard router của Reacter trên server side . Với cách giải quyết này thì không quan trọng việc server-side route được gọi, server sẽ luôn luôn trả về cùng một html file, sau đó nếu user access example.com/users React Router sẽ tự động load User component cho bạn

II.7. Router matching

• React Router sẽ xử lý việc việc route matching giống như những router khác

    <Route path="users/:userId" component={UserProfile} />

Route sẽ được match bất cứ khi nào user access users/1

III. Nguồn tham khảo

https://css-tricks.com/learning-react-router/

https://www.youtube.com/watch?v=1iAG6h9ff5s&t=198s

https://www.youtube.com/watch?v=eofpZPRUnP8&t=61s