Em chào anh chị ! cho em hỏi làm sao để chuyển trang theo link đã tạo trong router mà tự động refresh trang ạ. VD như này :
<Route exact path="/contact" component={Contact} /> khi click vào một button nào đó thì nó tự chuyển URL sang mydomain.com/contact khi đó component Contact tự động được render theo. Nếu dùng thẻ Link hay NavLink thì nó không reload trang, nên mình dùng thẻ <a với href="/contact" thì nó tự chuyển trang và tự refresh theo đúng ý mình. Nhưng nó chỉ đúng trên localhost thôi, còn khi deploy lên hosting thì cách này bị lỗi 404 vì không tìm thấy URL https://mydomain.com/contact. Mọi người giúp em với. Cảm ơn ạ 
Refresh trang khi khi chuyển trang trong reactJS router
1 Like
Lý do j mà bạn muốn refresh cả trang vậy, còn nếu dùng thẻ a mà ko đc thì chuyển sang thử dùng window location sự kiện onclick
tại vì page đó có plugin facebook, với một số addon nữa nên phải refresh nó mới hiện ra đó anh
import React, { Component } from 'react';
class Demo extends Component {
refresh = () => {
window.location.reload();
}
render() {
return (
<div>
{this.refresh()}
<h1>Ahihihi</h1>
</div>
);
}
}
export default Demo;
Dùng window.location.reload(). nó bị reload liên tục, có cách nào tự reload chỉ một lần mà không cần bấm vào button không ạ
1 Like
không có ai gặp lỗi giống mình ạ ?
Gọi refresh trong render function thì chả bị lặp reload.
Để fix thì cần bồi dưỡng lại kiến thức về các loại function trong React.
5 Likes
Khi deloy lên hosting (chắc là php) thì bác nên tạo thêm route /* trong backend, route này chấp nhận tất cả các path mà không báo 404, còn cách tạo route này như nào trong php mình ko rõ lắm (tại mình dùng nodejs, đoán là trong file .htaccess)
4 Likes
Bạn sai cơ bản quá, mình nói là sai nhé, thiếu còn là nhẹ.
Bạn đã dùng react-router-dom thì nó là client render, tính năng của cái đó là hỗ trợ chuyển trang không reload. Thế mà bạn lại hỏi làm sao để chuyển trang có reload trong react.
Tới khi nào bạn còn dùng những thứ thuộc client hay cụ thể hơn là react-router-dom (Link, NavLink…) thì bạn search google không bao giờ ra đáp án vì cái thư viện bạn dùng nó k sinh ra để phục vụ yêu cầu bạn đang muốn.
Thế sao dùng thẻ <a/> lại được? Vì nó là html, là cái có sẵn, không phải import từ đâu cả, mặc định cứ ấn vào thẻ <a/> thì chuyển trang, lúc này server sẽ xử lý (mình không nói cứ cái gì mặc định của html thì server xử lý nhé, mình nói riêng thẻ <a/>)
Nên hướng giải quyết sẽ tập trung vào server, như nào thì bạn tự tìm hiểu tiếp thôi.
Mình khuyên bạn nên học lại từ đầu, cơ bản js, sang một chút command line, rồi qua một ít server, nắm đc client-server là cái gì. Chứ cứ từ thiên không nhảy bụp phát vào học rồi lại đi hỏi những câu trời ơi thế này thì chỉ khổ bạn, bạn tìm google không ra bạn lại thấy nó khó hơn, giải thích thì toàn mấy thánh lên mặt dậy đời như mình, không chịu đưa đáp án, toàn bắt đọc lại, học lại.
Cái nền không vững thì khó đi tiếp lắm bạn ạ, bạn muốn tự học thì phải có gốc rễ, còn không, muốn học từ ngọn xuống thì đầu tư ra trung tâm, khó phát hỏi thầy, trách nhiệm người ta là trả lời bạn, vấn đề là với kiến thức từ ngọn, hổng lỗ chỗ, thì bạn hiểu được bao nhiêu % lời người dậy thôi.
8 Likes
dùng NavLink, Link với HashRouter thay vì BrowserRouter vẫn chuyển trang mà không load lại được nhé
2 Likes
sử dụng useEffect nhé bạn
useEfect(() => {
window.location.reload()
}, [])
dependence array là [] sẽ đảm bảo được việc chỉ chạy reload() 1 lần khi component được render
2 Likes
cái này vẫn chưa có ai resolve à, vì căn bản reactjs nó render từ client, nếu dùng reload từ window thì kiểu gì nó cũng reload vô hạn, dù có xài useEffect hay gì đi nữa cũng thế thôi.
cái ta cần là điều kiện để biết nó đã reload rồi và không phải load lại nữa.
vậy nên flag đó để không bị mất khi reload thì nên gắn vào localStorage hay session gì đó cũng được.
sau khi component bị hủy thì nhớ xóa nó trong storage là xong.
trường hợp user tắt luôn trình duyệt thì có thể dùng beforeunload để detect và xóa flag trong storage.
đối với trường hợp user đang dùng thì vì lý do gì đó như cúp điện chẳng hạn thì mình có thể viết thêm 1 lệnh để xóa flag đó trong storage khi app được load lên.
2 Likes
Vấn đề này em đã giải quyết được rồi, nguyên nhân mà localhost chạy được nhưng deploy lên server thật không chạy được là do config server chưa chuẩn thôi ạ. Nhưng router của react là router phía client và sau đó em nhận ra client side rendering không phải là cái em cần, nên có thử qua NextJS để tận dụng router có sẵn của nextJS sử dụng được cách chuyển trang truyền thống (SSR) như này
Nhưng do phía backend đang là Spring boot, do đó server phải cài 2 web server là tomcat để chạy file .war của spring boot và nodejs để làm runtime cho nextjs. NextJS vẫn phải tạo http request để call REST API của spring (quá mất thời gian vì system của em không có app nên không cần triển khai kiến trúc web service, khi nào có mobile app hoặc desktop chỉ cần viết thêm rest controller với thêm JWT vào là được)
Câu hỏi này em hỏi từ năm 2020, nghe theo trào lưu trên mạng học react theo trend nhưng sau khi học vòng vòng thì nhận ra react không phải là cái em cần nên trở về cái ban đầu vốn được học ở trường là làm giao diện bằng JQuery và JSP đối với Spring và blazor đối với ASP .NET
2 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?