Introduction about react-router

React.js chỉ là thư viện để tạo các Component, nó không có Router. Vì vậy React-Router được sinh ra, là một thư viện của React, giúp các React App có thể routing ở phía client. React-Router giúp việc dẫn hướng user interface đồng bộ với URL.

Ứng dụng của React-Router dễ thấy nhất ở các trang ứng dụng single-app, đây là những trang web mà chỉ thực hiện khởi tạo một lần, khi người dùng ấn vào một đường link hay button thì Javascript trên trang web sẽ thực thi mà trang web không cần phải reload lại. Việc quản lý địa chỉ trên thanh địa chỉ được thực hiện bởi router.

Trong bài viết này tôi sẽ giới thiệu cách ứng dụng để tạo ra ví dụ đơn giản nhất của react-router. Các nội dung khác của react-router, bạn có thể tham khảo thêm tại:

https://github.com/reactjs/react-router-tutorial/tree/master/lessons

• Cài đặt gem "react-rails" và "react-router-rails"

  gem "react-rails"

  gem "react-router-rails"

  bundle install

• Thêm dòng sau vào app/assets/javascripts/application.js

  //= require react

  //= require react_ujs

  //= require react_router

  //= require react_router_ujs

  //= require components

Note: Require thư mục 'components' sau 'react_router'

• Khởi tạo index action trong applicaiton_controller.rb

app/controllers/application_controller.rb

  def index
    @location_path = "/#{params[:path]}"
  end

• Tạo view chính của app index.html.erb trong view/application

Theo thứ tự ý nghĩa các tham số: khởi tạo tên routes component, khởi tạo location handler, data passing và sử dụng server rendering.

<%= react_router 'MyRoutes', 'HistoryLocation', { foo: 'Foo' }, { prerender_location: @location_path } %>

• Khởi tạo component chính của trang, khởi tạo route

React-router gồm 3 phần chính:

Router

Route

Link

Link dùng để dẫn hướng trang (component) cần trỏ đến, Route là component kết nối giữa path và component tương ứng với path đó, còn Router thì wrap tất cả các Route con. Ở đây, ta chỉ đơn thuần là render 1 route tương ứng với 1 URL.

Sử dụng react-router trong javascript, tạo route:

/app/assets/javascripts/components/app.js.jsx

var RouteHandler = ReactRouter.RouteHandler,
    Link = ReactRouter.Link;`
var App = React.createClass({
  render: function() {
    return (
      <div>
        <nav>
          <ul>
            <li>
              <Link to='/'>Hello World</Link>
            </li>
            <li>
              <Link to='/page1'>Another Page</Link>
            </li>
          </ul>
        </nav>
        <RouteHandler {...this.props}/>
      </div>
    );
  }
});

• Khởi tạo components con để React-router thực hiện routing

• Component 1

/app/assets/javascripts/components/HelloWorld.js.jsx

var HelloWorld = React.createClass({
  render: function() {
    return (
      <div>Hello {this.props.foo}!</div>
    );
  }
});

• Component 2

/app/assets/javascripts/components/AnotherPage.js.jsx

var AnotherPage = React.createClass({
  render: function() {
    return (
      <div>Another Page</div>
    );
  }
});

• Kết quả:

Khi click vào đường link trang không cần phải load lại.

Thanks for read!

Nguồn: https://github.com/mariopeixoto/react-router-rails

https://coddingdaily.blogspot.com/2016/06/reactjs-dung-react-router-va-material.html

https://github.com/reactjs/react-router-tutorial/tree/master/lessons