BrowserRouter vs Router with history.push ()

mitchkman 2019-06-21 17:14.

Tôi đang cố gắng hiểu sự khác biệt giữa BrowserRoutervà Routercủa react-router-domgói (v5) và sự khác biệt mà nó tạo ra cho ví dụ của tôi bên dưới.

Tài liệu cho biết:

BrowserRouter A sử dụng API lịch sử HTML5 (pushState, ReplaceState và sự kiện popstate) để giữ cho giao diện người dùng của bạn đồng bộ với URL.

Nguồn: https://reacttraining.com/react-router/web/api/BrowserRouter

Bộ định tuyến Giao diện cấp thấp chung cho tất cả các thành phần bộ định tuyến. Thông thường, các ứng dụng sẽ sử dụng một trong các bộ định tuyến cấp cao để thay thế: BrowserRouter, HashRouter, MemoryRouter, NativeRouter, StaticRouter

Nguồn: https://reacttraining.com/react-router/web/api/Router

Theo những gì tôi hiểu là tôi nên sử dụng BrowserRouter cho các ứng dụng trình duyệt HTML5 của mình và tôi đã làm điều này cho đến nay.

Ví dụ history.push (...):

Tôi đang cố gắng thực hiện history.push('/myNewRoute')trong vòng tích tắc:

import history as './history';

...

export function someAsyncAction(input) {
  return dispatch => {
    fetch(`${API_URL}/someUrl`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ input }),
    }).then(() => {
      history.push('/myNewRoute');
    }).catch((err) => {
      dispatch(setError(err));
    })
  };
};

history được định nghĩa là mô-đun này:

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

và historycũng được chuyển đến bộ định tuyến của tôi:

import { BrowserRouter as Router } from 'react-router-dom';
import history as './history';

...

const App = () => (
  <Router history={history}>
     ...
  </Router>
);

Sự cố: history.push() sẽ cập nhật URL trong thanh trình duyệt nhưng không hiển thị thành phần đằng sau tuyến đường.

Nếu tôi nhập Routerthay vì nhập BrowserRouter, nó hoạt động:

// Does not work:
import { BrowserRouter as Router } from 'react-router-dom';

// Does work:
import { Router } from 'react-router-dom';

reactjs react-router react-router-dom html5-history react-thunk

2 answers

Juanso87 2019-06-27 00:52.

BrowserRouterbỏ qua phần hỗ trợ lịch sử vì nó tự động xử lý lịch sử cho bạn. Nếu bạn cần truy cập lịch sử bên ngoài một thành phần phản ứng, thì việc sử dụng Routersẽ ổn.

Xitang 2020-04-01 10:52.

Bạn có thể truy cập lịch sử thông qua hook useHistory let history = useHistory();để thực hiện history.push()cho BrowserRouter.

Nhìn vào tài liệu API lịch sử HTML5 , có vẻ như API lịch sử tự động bảo toàn trạng thái cho người dùng. Giả sử ban đầu bạn đang ở trang 1 và trang 1 có giao diện trang A. Bạn đã thực hiện một số hành động thay đổi giao diện trang 1 thành B. Nếu bây giờ bạn chuyển sang trang 2, khi bạn nhấp vào nút quay lại trên trình duyệt, bạn sẽ trực tiếp trở lại trang 1. API Lịch sử cài đặt trước trạng thái của bạn để nó biết hiển thị triển vọng B cho bạn, vì vậy đó là lợi thế của việc sử dụng BrowserRouter. Mặc dù tôi không chắc chắn 100%, nhưng tôi cho rằng Browserchức năng này không đi kèm và trong trường hợp đó, nó sẽ hiển thị triển vọng A khi bạn được chuyển hướng trở lại trang 1. Điều này không đúng. Tôi không chắc chắn về sự khác biệt.

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar: Tất cả những gì cô ấy nói về tình yêu và khoảng thời gian 5 năm để tìm 'một nửa' của cô ấy

Jana Duggar đã cởi mở về việc tìm kiếm tình yêu của mình. Đây là tất cả những gì cô ấy nói về chủ đề này và khoảng thời gian 5 năm kết hôn của cô ấy.

2023-06-12.

Sam Heughan biết chính xác những gì anh ấy sẽ lấy từ bộ 'Outlander' - 'Tôi cảm thấy như mình là Jamie khi tôi mặc chúng'

Ngôi sao của 'Outlander' Sam Heu Afghanistan gần đây đã tiết lộ những gì anh ấy sẽ làm từ phim trường để tưởng nhớ Jamie Fraser, vai diễn đã đưa anh ấy trở thành một ngôi sao.

2023-06-12.

Bài hát đầu tiên của The Beatles là một trong những 'Màn trình diễn thú vị nhất' của ban nhạc, theo Fab Four Insider

"She Loves You" được viết trong một giờ, thu âm trong một ngày và là bài hát của The Beatles với một trong những màn trình diễn xuất sắc nhất trong sự nghiệp của họ.

2023-06-11.

Dolly Parton đã giúp đỡ bà nội 'không hợp lệ' của cô ấy khi không có đứa cháu nào khác muốn—bà ấy cũng chơi khăm bà ấy

Dolly Parton và bà Bessie của cô ấy có một mối quan hệ đặc biệt. Bà Parton ốm nặng, nhưng điều đó không ngăn được Dolly chơi khăm bà.

2023-06-11.

Loại gỗ cứng nhất thế giới là gì?

Bạn có thể nghĩ rằng gỗ sồi hoặc gỗ hồ đào rất cứng, nhưng khi nói đến loại gỗ cứng nhất thế giới thì chúng thậm chí còn không có loại nào sánh bằng.

2025-10-29.

10 sinh vật biển đáng sợ nhất ẩn núp dưới đáy đại dương

Đại dương tràn ngập vẻ đẹp, nhưng cũng ẩn chứa một số sinh vật biển đáng sợ nhất hành tinh. Nhiều loài trong số này ẩn núp sâu dưới bề mặt đại dương, trong thế giới tối tăm, áp suất cao của biển sâu.

2025-10-29.

10 Phép thuật Kiếm tốt nhất trong Minecraft

Nếu bạn đang chiến đấu với quái vật hung hãn hoặc chuẩn bị cho các tình huống PvP, việc nắm rõ những phép thuật kiếm tốt nhất trong Minecraft có thể mang lại cho bạn lợi thế lớn. Phép thuật kiếm cho phép bạn gây nhiều sát thương hơn, tăng lượng quái vật rơi ra và kéo dài độ bền của kiếm.

2025-10-29.

13 quốc gia xã hội chủ nghĩa có vẻ ngoài khác biệt nhau

Khi nói đến các nước xã hội chủ nghĩa, người ta thường hình dung ra sự kiểm soát hoàn toàn của chính phủ và không có sở hữu tư nhân. Nhưng trên thực tế, các nền kinh tế xã hội chủ nghĩa rất khác nhau.

2025-10-29.

Tóm tắt về Gấu: Marcus có phải là người đàn ông tốt bụng nhất, dịu dàng nhất, chân thành nhất ở Chicago không?

“Những đứa trẻ” tung dàn khách mời tên tuổi và nhiều tin tức chấn động

2024-07-03 19:12.

Với mức giá 9.800 USD, bạn có muốn 'dọn đồ' trong chiếc Toyota RAV4 2008 bảy chỗ này không?

Chiếc RAV4 này được khẳng định là ở tình trạng tuyệt vời và được chuẩn bị cho một trò chơi ghế âm nhạc.

2024-07-03 19:04.

Xe tải giao hàng Amazon bốc cháy trong vụ nổ rực lửa trong cái nóng mùa hè ở Houston

Cảnh quay từ máy bay không người lái đã ghi lại cảnh lính cứu hỏa dường như đang cố gắng dập tắt ngọn lửa.

2024-07-03 19:04.

Black Panther Show của Marvel sẽ là chương trình hoạt hình quan trọng nhất

Eyes of Wakanda liên kết trực tiếp với MCU, cùng với các cập nhật về X-Men '97, What If..., Daredevil, v.v.

2024-07-03 19:03.

Tất tần tật về chiếc váy trắng biểu tượng của Marilyn Monroe (và bi kịch hậu trường mà nó gây ra)

Marilyn Monroe đã mặc một chiếc váy trắng nổi tiếng trong bộ phim 'The Seven Year Itch'. Sau đây là mọi thông tin cần biết về chiếc váy và khoảnh khắc mang tính biểu tượng của Monroe trên song sắt tàu điện ngầm.

2024-08-25.

Vợ của Patton Oswalt là ai? Tất cả về Meredith Salenger

Patton Oswalt kết hôn với vợ mình, nữ diễn viên Meredith Salenger, vào năm 2017. Sau đây là mọi thông tin cần biết về vợ của Patton Oswalt, Meredith Salenger.

2024-06-16.

3 cách đã được chứng minh để cải thiện kỹ năng viết của bạn

Lợi ích của việc viết và các chiến lược giúp bạn làm điều đó

Vào năm 2022, với việc phát hành GPT-3, kỹ năng viết dường như trở nên ít quan trọng hơn. Với AI, những người viết kém cũng có thể tạo ra đội ngũ nhân viên chất lượng.

Sự xói mòn chậm: Hé lộ những cách mọi người lãng phí trong sự nghiệp của họ

Trong thế giới có nhịp độ nhanh và cạnh tranh ngày nay, sự nghiệp của một người đóng một vai trò quan trọng trong sự phát triển cá nhân, ổn định tài chính và sự hài lòng trong cuộc sống nói chung. Tuy nhiên, nhiều cá nhân thấy mình bị mắc kẹt trong một chu kỳ trì trệ và không hài lòng không ngừng, dần dần lãng phí trong cuộc sống nghề nghiệp của họ.

Điều gì làm cho một podcast có ảnh hưởng?

Tuần trước, tôi nhận thấy một thông cáo báo chí, được gửi qua PressGazette (một trang web tin tức truyền thông của Anh). Bài báo thông báo rằng Acast, công ty quảng cáo và lưu trữ podcast của Scandi, sẽ lãnh đạo một tập đoàn gồm các nhà xuất bản “có lẽ là có ảnh hưởng nhất” trong lĩnh vực podcasting.

Language

Japanese

Spanish

German

French

Thai

Portuguese

Russian

Vietnamese

Italian

Korean

Turkish

Indonesian

Polish

Hindi

BrowserRouter vs Router with history.push ()

2 answers

Related questions

MORE COOL STUFF

Jana Duggar: Tất cả những gì cô ấy nói về tình yêu và khoảng thời gian 5 năm để tìm 'một nửa' của cô ấy

Sam Heughan biết chính xác những gì anh ấy sẽ lấy từ bộ 'Outlander' - 'Tôi cảm thấy như mình là Jamie khi tôi mặc chúng'

Bài hát đầu tiên của The Beatles là một trong những 'Màn trình diễn thú vị nhất' của ban nhạc, theo Fab Four Insider

Dolly Parton đã giúp đỡ bà nội 'không hợp lệ' của cô ấy khi không có đứa cháu nào khác muốn—bà ấy cũng chơi khăm bà ấy

Loại gỗ cứng nhất thế giới là gì?

10 sinh vật biển đáng sợ nhất ẩn núp dưới đáy đại dương

10 Phép thuật Kiếm tốt nhất trong Minecraft

13 quốc gia xã hội chủ nghĩa có vẻ ngoài khác biệt nhau

Tóm tắt về Gấu: Marcus có phải là người đàn ông tốt bụng nhất, dịu dàng nhất, chân thành nhất ở Chicago không?

Với mức giá 9.800 USD, bạn có muốn 'dọn đồ' trong chiếc Toyota RAV4 2008 bảy chỗ này không?

Xe tải giao hàng Amazon bốc cháy trong vụ nổ rực lửa trong cái nóng mùa hè ở Houston

Black Panther Show của Marvel sẽ là chương trình hoạt hình quan trọng nhất

Tất tần tật về chiếc váy trắng biểu tượng của Marilyn Monroe (và bi kịch hậu trường mà nó gây ra)

Vợ của John Cleese là ai? Tất cả về Jennifer Wade

Vợ của Patton Oswalt là ai? Tất cả về Meredith Salenger

Vợ của Michael C. Hall là ai? Tất cả về Morgan Macgregor

đại từ là siêu đáng sợ

3 cách đã được chứng minh để cải thiện kỹ năng viết của bạn

Lợi ích của việc viết và các chiến lược giúp bạn làm điều đó

Sự xói mòn chậm: Hé lộ những cách mọi người lãng phí trong sự nghiệp của họ

Điều gì làm cho một podcast có ảnh hưởng?

Language