Tổng quan về Bộ định tuyến React

---

React Router đã trải qua một số thay đổi trong những năm qua. Đây là phần giới thiệu về version mới nhất: React Router 4.

Cài đặt Bộ định tuyến React

Tương tự như cài đặt bất kỳ gói nào. Tuy nhiên, có thể bạn cần react-router-dom chứ không phải react-router :

$ yarn add react-router-dom

# or with npm:
$ npm install react-router-dom --save

Cài đặt các tuyến đường

Nó thực sự khá trực quan. Chỉ cần xác định các tuyến trong phần tử con của một Bộ định tuyến:

import React, { Component } from 'react';
// This example's for browser use, so I'm using `BrowserRouter`.
// The are other routers for other environments, though.
import { BrowserRouter, Route } from 'react-router-dom';

// Your components.
import AboutPage from './AboutPage';
import HomePage from './HomePage';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          {/* `component` will render when `path` matches the user's location */}
          {/* `exact` makes it so it only renders if `path` matches exactly. */}
          {/* Otherwise, `HomePage` would render on "mysite.com/About" as well as "mysite.com/". */}
          <Route exact path="/" component={HomePage}/>
          <Route path="/About" component={AboutPage}/>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Liên kết với các tuyến đường

Tất nhiên, các tuyến đường không hữu ích nếu user phải chỉnh sửa URL theo cách thủ công. React Router cung cấp một giải pháp dưới dạng thành phần Link :

import React from 'react';
import { Link } from 'react-router-dom';

// Our Home Page.  Exciting stuff.
export default function HomePage() {
  return (
    <div>
      <h1>{'Home Page'}</h1>
      {/* A link to the About route. */}
      <Link to="/About">{'Check out our About Page!'}</Link>
    </div>
  );
}

Nếu bạn đang tự hỏi tại sao bạn không nên chỉ sử dụng thẻ neo ( <a> ): React Router thực hiện một số điều thú vị với đối tượng lịch sử.

---

---

Các tin liên quan