Saya berharap ada jawaban sederhana. Saya sudah mencoba berbagai hal dan mencari di mana-mana tetapi saya masih belum dapat memperbaiki masalah ini.

JADI! Menggunakan React-Router-Dom, saya memiliki komponen induk dengan logo yang berada di posisi tetap dan terlihat di semua komponen/halaman anak.

class Parent extends React.Component {
  render() {
    return (
       <div>
        {window.location.pathname==='/contact' ? 
         null :
         <div className='originalLogo'></div>
        }
       </div>

) } }

Namun pada halaman Kontak, logo tersebut diganti dengan versi modifikasi dan aslinya disetel ke null.

class Child extends React.Component {
   render() {
     return (
      <div className='modifiedLogo'></div>
  )

} }

Saya dapat menangkap perubahan ini ketika pengguna secara manual mengklik halaman kontak melalui menu. Tapi di sinilah masalahnya dimulai. Jika pengguna membuka bilah menu dan mengklik beranda, logo berubah kembali ke versi aslinya. TETAPI jika pengguna mengklik 'KEMBALI' pada browser dari halaman kontak, logo tetap sebagai versi modifikasi, bukan versi aslinya. Hanya sampai pengguna mengklik menu di beranda, yang akan menyebabkan halaman dirender ulang karena perubahan status (tampilan menu), dan kemudian logo akan kembali ke bentuk aslinya.

Jadi pertanyaan saya adalah, bagaimana cara merender ulang halaman ketika pengguna mengklik tombol 'KEMBALI' di browser?

0
smg88 24 Oktober 2019, 09:12

1 menjawab

Jawaban Terbaik

Anda dapat menggunakan komponen Switch dan Route untuk merender tidak hanya halaman, tetapi juga bagian halaman. Ini harus membantu dengan masalah.

import { Switch, Route } from 'react-router-dom';

class Parent extends React.Component {
    render() {
        return (
            <Switch>
                <Route path="/contact" render={() => null} />
                <Route render={() => <div className='originalLogo' />} />
            </Switch>
        );
    }
}
1
sneas 24 Oktober 2019, 06:29