Virus Corona (Covid-19)

Dapatkan Informasi terbaru

URL React Router Tidak Berfungsi Saat Reload atau Melakukan Refresh Pada ReactJs

Admin 04 Dec 2019 269

Saya menggunakan React-router dan berfungsi dengan baik saat saya mengklik tombol tautan, tetapi ketika saya menyegarkan halaman web saya tidak memuat apa yang saya inginkan.

Misalnya, saya masuk localhost/joblist dan semuanya baik-baik saja karena saya tiba di sini dengan menekan tautan. Tetapi jika saya me-refresh halaman web saya mendapatkan:

Cannot GET /joblist

Secara default, tidak berfungsi seperti ini. Awalnya saya punya URL saya localhost/#/ dan localhost/#/joblist dan mereka bekerja dengan sangat baik. Tapi saya tidak suka URL semacam ini, jadi mencoba menghapusnya #, saya menulis:

Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.body);
});

Masalah ini tidak terjadi localhost/, yang ini selalu mengembalikan apa yang saya inginkan.

EDIT: Aplikasi ini satu halaman, jadi /joblisttidak perlu meminta apa pun ke server mana pun.

EDIT2: Seluruh router saya.

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="joblist" path="/joblist" handler={JobList}/>
        <DefaultRoute handler={Dashboard}/>
        <NotFoundRoute handler={NotFound}/>
    </Route>
);

 

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});

 

Jawaban:

Saya menggunakan create-react-app untuk membuat situs web sekarang dan memiliki masalah yang sama disajikan di sini. Saya menggunakan paket BrowserRouting dari react-router-dom. Saya menjalankan pada server Nginx dan apa yang dipecahkan untuk saya adalah menambahkan berikut ini /etc/nginx/yourconfig.conf

location / {
  if (!-e $request_filename){
    rewrite ^(.*)$ /index.html break;
  }
}

Yang terkait dengan menambahkan berikut ini .htaccess jika Anda menjalankan Appache

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Ini juga tampaknya menjadi solusi yang disarankan oleh Facebook sendiri dan dapat ditemukan di sini

 

Tags

react js react router

Latest Stories


Close Ads X