Cách xây dựng ứng dụng một trang bằng React Router

Định tuyến lồng nhau và cách thực hiện

Bộ định tuyến React hỗ trợ định tuyến lồng nhau, cho phép bạn bọc nhiều Tuyến vào một Tuyến duy nhất. Điều này chủ yếu được sử dụng khi có một số điểm tương đồng trong đường dẫn URL của các Tuyến.

Khi bạn đã tạo các thành phần mà bạn muốn định tuyến, bạn sẽ phát triển các Tuyến riêng lẻ cho từng thành phần trong phần ứng dụng thành phần.

Ví dụ:

 import { Routes, Route } from 'react-router-dom'; 
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function App() {
    return (
      <Routes>
        <Route path='/article' element={ <Articles /> }/>
        <Route path='/article/new' element={ <NewArticle /> }/>
        <Route path='/article/1' element={ <ArticleOne /> }/>
      </Routes>
    )
}
export default App;
 

Khối mã ở trên nhập và định tuyến các thành phần đã tạo Bài viết, Bài báo mớivà Điều Một. Có một số điểm tương đồng trong đường dẫn URL giữa ba tuyến đường.

Các Bài báo mới Tên đường dẫn của tuyến đường bắt đầu giống như Bài viết Tên đường dẫn của định tuyến, có thêm dấu gạch chéo ngược (/) và từ “mới”, tức là (/ mới). Sự khác biệt duy nhất giữa tên đường dẫn của Bài viết Tuyến đường và Điều Một Lộ trình là dấu gạch chéo (/1) ở cuối Điều Một tên đường dẫn của thành phần.

Bạn có thể lồng ba Tuyến thay vì để chúng ở trạng thái hiện tại.

Như vậy:

 import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function App() {
    return (
      <Routes>
        <Route path='/article'>
          <Route index element={ <Articles /> }/>
          <Route path='/article/new' element={ <NewArticle /> }/>
          <Route path='/article/1' element={ <ArticleOne /> }/>
        </Route>
      </Routes>
    )
}
export default App;
 

Bạn đã gói ba Lộ trình riêng lẻ trong một Tuyến đường yếu tố. Lưu ý rằng phụ huynh Tuyến đường phần tử chỉ có đường dẫn thuộc tính và không yếu tố thuộc tính xác định thành phần để kết xuất. Các mục lục thuộc tính trong con đầu tiên Tuyến đường phần tử xác định rằng điều này Tuyến đường hiển thị khi bạn điều hướng đến đường dẫn URL của trang gốc Tuyến đường.

Để làm cho mã của bạn tốt hơn và dễ bảo trì hơn, bạn nên xác định các Tuyến của mình trong một thành phần và nhập nó vào ứng dụng thành phần để sử dụng.

Ví dụ:

 import { Routes, Route } from 'react-router-dom';
import Articles from './Articles';
import NewArticle from './NewArticle';
import ArticleOne from './ArticleOne';
function ArticleRoutes() {
    return (
      <Routes>
        <Route index element={ <Articles /> }/>
        <Route path='/article/new' element={ <NewArticle /> }/>
        <Route path='/article/1' element={ <ArticleOne /> }/>
      </Routes>
    )
}
export default ArticleRoutes;
 

Thành phần trong khối mã ở trên chứa các Tuyến lồng nhau trước đây có trong thành phần ứng dụng. Sau khi tạo thành phần, bạn nên nhập nó vào ứng dụng thành phần và định tuyến nó bằng cách sử dụng một Tuyến đường yếu tố.

Ví dụ:

 import { Routes, Route } from 'react-router-dom';
import ArticleRoutes from './ArticleRoutes';
function App() {
    return (
      <Routes>
        <Route path='/article/*' element={ <ArticleRoutes /> }>
      </Routes>
    )
}
export default App;
 

trong trận chung kết Tuyến đường thành phần, các ký hiệu dấu gạch chéo ngược và dấu hoa thị được thêm vào ở cuối tên đường dẫn của Tuyến đảm bảo rằng tên đường dẫn đó tương ứng với bất kỳ tên đường dẫn nào bắt đầu bằng (/bài báo).

Có nhiều hơn để React Router

Bây giờ bạn đã quen với những kiến ​​thức cơ bản về cách xây dựng các ứng dụng một trang trong React.js bằng cách sử dụng Bộ định tuyến React.

Có nhiều tính năng khác có sẵn trong thư viện Bộ định tuyến React giúp trải nghiệm của nhà phát triển năng động hơn khi xây dựng các ứng dụng web.