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 /joblist
tidak 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>
);
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
react router react js