Next.js: Mungkinkah meneruskan status ke berikutnya/router?

Saat ini itu tidak mungkin dan saya tidak berpikir kami akan mendukungnya dalam waktu dekat.

Tapi mari kita buka ini dan lihat apakah kita benar-benar membutuhkan ini.

Saya pikir Anda harus melakukan ini dengan melewatkan parameter kueri.

Maksud saya, Anda dapat mencapai hal serupa dengan meneruskan parameter kueri seperti yang dikatakan nkzawa, tetapi saya lebih suka tidak mencemari url saya dengan http://www.example.com/?message=This%20is%20a%20long%20message%20forwarded%20to%20be%20displayed dan lebih suka memiliki transfer status seperti bagaimana react-router melakukannya.

Anda dapat menggunakan as untuk menyamarkan URL

Yah saya kira begitu, tetapi jika saya menggunakan as , nama path tidak mempertahankan nama path yang sebenarnya di props.url.pathname, yang berarti lebih banyak hal untuk diteruskan ke kueri. Hanya _cleaner_ untuk membuatnya melewati status.

Saya memindahkan proyek ke next.js dan tidak mengalami masalah kompatibilitas besar karena saya menemukan cara untuk memperbaiki kode agar berfungsi, hanya ketidaknyamanan dan verbositas pada titik ini yang dapat ditingkatkan dan semua masalah ini adalah .

Terima kasih semua atas masukan Anda.

Menutup penyebab ketidakaktifan ini 👍

Sedikit lebih dari setahun sejak saya membahas ini, tetapi apakah ini masih tidak dapat didukung?

Anda dapat menyimpan status apa pun yang diperlukan di localStorage, sessionStorage, variabel, toko Redux, dll. dan kemudian menggunakannya di getInitialProps (memeriksa apakah Anda menjalankan sisi klien).

saya pikir nextjs harus mulai mendukung react-router

Saya ingin fungsi yang sama.

Sebelumnya saya menggunakan CRA dan di sana saya biasa mengirim status ke komponen yang dirutekan. Saya ingin fungsionalitas yang sama dengan nextjs.

Apa yang disarankan @sergiodxa dalam solusi tetapi dukungan perpustakaan akan bagus.

Sama di sini, alangkah baiknya jika dimungkinkan untuk melewatkan data dengan Router.push() dan mengambilnya nanti dengan withRouter

Saya ingin fungsi yang sama. Ada pembaruan tentang ini?

Saya ingin fungsi yang sama. Ada pembaruan tentang ini?

saya juga

Pertanyaan lain yang terkait dengan masalah ini adalah:

• Saya tidak ingin mengotori URL saya ketika saya memanggil Router.push() dan saya ingin meneruskan status ke komponen berikutnya. Apakah ada cara untuk melakukannya? Menggunakan localStorage atau cookie adalah praktik yang buruk karena tidak dikontrol secara langsung oleh kait React atau siklus hidup React yang lama

Saya memiliki skenario di mana saya memiliki komponen yang dapat diklik. mengkliknya akan membuka halaman detailnya. Dengan next.js saat ini saya dapat melewati id proyek dan kemudian mendapatkan detailnya menggunakan useEffect dan panggilan axios tetapi karena saya sudah memiliki data, saya sangat berharap saya dapat mengirim status ke halaman itu.

Akan menyenangkan untuk memiliki ini.

@sergiodxa Ya, ada banyak cara untuk mengirimkan pesan sementara tetapi keuntungan mengikatnya ke router adalah kita tidak perlu menulis kode tambahan untuk mengelola siklus hidup nilai yang kita berikan. Mereka akan terikat dengan acara navigasi router dan tidak tersedia dalam konteks lain.

Misalnya, Jika saya mendorongnya ke toko redux saya, maka saya harus mengecualikannya agar tidak disimpan ke penyimpanan lokal dan juga mengirimkan tindakan pesan yang jelas di pihak penerima.

Jika saya menambahkan string kueri itu menjadi tautan perma yang menggunakan dapat menandai dan kemudian kembali ke.

Tetapi saya dapat mendorongnya ke halaman berikutnya dan hanya halaman berikutnya melalui router.push Saya tidak perlu memberikan kompensasi apa pun; nilainya hanya akan tersedia dalam konteks itu.

Sangat mirip dengan connect-flash

Tidak ada solusi sejak 15 Januari 2017 ?
Kami membutuhkan fitur itu:

Sama di sini, alangkah baiknya jika dimungkinkan untuk melewatkan data dengan Router.push() dan mengambilnya nanti dengan withRouter

Akan menyenangkan untuk memiliki ini di nextjs

jika Anda ingin menyembunyikan parameter kueri, gunakan saja seperti ini

Router.push(`/main?userName=${userName}`, 'main')

daripada halaman utama, Anda hanya dapat melihat /main di url dan
console.log(Router.route) menunjukkan kueri

pathname: "/main"
query: {userName: "fadsfasd"}
asPath: "main"

oh ya, itu benar. Btw saya merasa sangat canggung bahwa router membutuhkan dua string. react-router bekerja dengan baik tanpa, mengapa ini?

Bagi yang ingin membuatnya bisa menggunakan Context Api .

Next.js menyediakan router.push() lewat shallow: true sebagai prop.
Ini adalah manajemen negara yang paling sederhana untuk melakukan itu.
https://nextjs.org/docs/api-reference/next/router#routerpush

Bersedia untuk mempertimbangkan kembali ini, namun perlu proposal yang bagus tentang cara mencegah pengguna menembak diri mereka sendiri menggunakan status riwayat mengingat Anda tidak dapat mengakses sisi server status riwayat, misalnya, akan sangat mudah menyebabkan masalah hidrasi.

Perhatikan bahwa membuka kembali ini tidak berarti bahwa saya tidak akan menulis RFC untuk fitur ini, itu terserah orang yang ingin memiliki fitur ini.

Router.push({ pathname: '/', query: { message: 'This is a message forwarded in a state.' } }, '/')

Lebih dari 2 tahun dan masih menunggu fitur negara

Router.push({ pathname: '/', query: { message: 'This is a message forwarded in a state.' } }, '/')

Ini masih bukan keadaan internal, ini adalah string kueri dengan fitur topeng, yang menurut saya cukup aneh untuk dilakukan.

Saya tidak terlalu akrab dengan ekosistem React. Tapi sepertinya kamu bisa melakukannya

router.push(
  { pathname: '/hello-world' }, 
  '/hello-world/2', 
  { step: 2 }
);

Saat Anda kembali dan memeriksa sebelum PopState, prop opsi akan berisi { step: 2 } .

Kita hanya membutuhkan ini di objek router .

Saya tidak terlalu akrab dengan ekosistem React. Tapi sepertinya kamu bisa melakukannya

router.push(
  { pathname: '/hello-world' }, 
  '/hello-world/2', 
  { step: 2 }
);

Saat Anda kembali dan memeriksa sebelum PopState, prop opsi akan berisi { step: 2 } .

Kita hanya membutuhkan ini di objek router .

Ini terlihat seperti peretasan temporal lainnya, bukan perilaku yang disengaja. Opsi yang diharapkan tercantum dalam dokumen . Tetapi sesuatu yang mirip dengan ini akan sangat bagus untuk memiliki perilaku yang diharapkan

@likerRr Rupanya semua parameter opsi diteruskan ke window.history.state . Jadi dengan contoh saya:
window.history.state == { step: 2 }

@likerRr Rupanya semua parameter opsi diteruskan ke window.history.state . Jadi dengan contoh saya:
window.history.state == { step: 2 }

Sepertinya memang begitu. Bagaimanapun, sampai didokumentasikan, itu tidak dapat digunakan di prod, karena implementasi opsi yang lewat dapat diubah kapan saja :kecewa: Masalah lain (?) dengan status riwayat, bahwa itu persisten. Dan jika Anda bermain dengan tombol "kembali"/"maju", Anda sebagian besar akan mendapatkan perilaku yang tidak terduga.

Sejauh yang saya pahami, kasus penggunaan yang diinginkan komunitas adalah meneruskan data yang hanya akan keluar selama transisi dari satu halaman ke halaman lain dan kita tidak perlu repot membersihkannya. Dan data ini seharusnya tidak muncul lagi ketika pengguna mengklik "maju/maju" di browser. Kalau tidak , ini adalah proposisi terbaik (imo).

Akan lebih baik jika js berikutnya mempertimbangkan ini

Ini berhasil untuk saya, Anda dapat menggunakan
https://github.com/vercel/next.js/issues/771#issuecomment -612018764

1: di halaman Berlangganan:
const handleClick = useCallback((mount) => {
Router.push( /payment?mount=${mount} , '/pembayaran');
}, []);
2: di Halaman Pembayaran
useEffect(() => {
konstan {
kueri: { mount },
} = Perute;
!mount && Router.push('/campaign-overview/subscription');
console.log('PaymentVM:React.FC -> mount', mount);
}, []);

Anda dapat melihat nilai mount di browser konsol.

Saya memahami masalah dan kenyamanan untuk dapat meneruskan status di router.push.

Apakah berikut ini akan menjadi solusi sementara?

Gunakan history.pushState browser, serta useState lokal dari string lokasi, dan ketika kami ingin mengarahkan ulang, kami menggunakan history.pushState serta menetapkan nilai baru ke status lokasi lokal. Pembaruan ke status lokasi-string harus memicu run useEffect. Kemudian memiliki pernyataan swich JS yang mengevaluasi lokasi dan mengembalikan komponen berdasarkan lokasi. Dan jika kita ingin mendapatkan komponen yang sama tanpa history.pushState (untuk exp jika pengguna me-refresh halaman), kita dapat membuat lokasi menjadi parameter query berikutnya yang dinamis. -- tidak mencobanya, hanya mencoba memikirkan solusi.

Bagi yang ingin membuatnya bisa menggunakan Context Api .

Next.js menyediakan router.push() lewat shallow: true sebagai prop.
Ini adalah manajemen negara yang paling sederhana untuk melakukan itu.
https://nextjs.org/docs/api-reference/next/router#routerpush

Bagaimana jika di my getServerSideProps , saya membuat dua panggilan, salah satunya harus diulang untuk setiap beban, dan satu hanya boleh dimuat dengan kondisi. Untuk itu, Shallow: true tidak akan banyak membantu karena ini bukan manajer negara bagian, itu bisa mengulang getServerSideProps , atau tidak melakukannya sama sekali.
Contoh skenario ini adalah jika saya membuat dua panggilan terpisah di getServerSideProps . Satu untuk konten utama halaman dan kemudian panggilan lain untuk mendapatkan tautan navigasi. Dalam render awal, saya ingin kedua panggilan berada di server, tetapi kemudian, saya sudah memiliki tautan nav di memori jadi saya tidak perlu mengambilnya kembali. Itu sebabnya kita membutuhkan negara.

Satu-satunya solusi adalah mengirimkan opsi as dengan params kueri tersembunyi tetapi kode kami akan buruk untuk setiap <Link/> yang kami berikan dalam sekumpulan parameter kueri yang berisi status kami saat ini. (Sebenarnya, saat saya menulis, saya berpikir untuk membuat Tautan HOC yang harus menggunakan href yang ditentukan dan mengirim objek kueri dengan status saat ini sehingga saya tidak perlu menulis objek status di setiap <Linke/> , saya hanya akan menangani ini di HOC)