Bereaksi router dengan templat berbeda untuk rute berbeda v. 5

Jan 18 2021

Hai, saya telah melihat pertanyaan ini dan ini persis seperti yang saya cari, tetapi saya tidak dapat membuatnya berfungsi. Bereaksi Router V4 Router dengan Halaman Utama / Template

Saya menggunakan versi 5.2

Komponen aplikasi menyertakan navigasi dan membungkus dua jalur dengan dua komponen templat, 'Publik' dan 'Pribadi' dan ketika saya mengklik setiap tautan saya berharap halaman itu dibungkus oleh templatnya tetapi hanya tautan pertama yang berfungsi dan menampilkan templatnya. Tautan kedua hanya mengubah url di bilah alamat browser dan hanya konten template pertama yang tersisa di halaman dan konten halaman kedua tidak ditampilkan. Jika saya mengubah urutan tautan selalu hanya tautan atas yang mendapatkan templat yang benar.

Di sinilah saya mendefinisikan rute dan tautan ke sana.

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul><li><Link to="/">Home</Link></li>
            <li><Link to="/members">Members</Link></li>
          </ul>
        </div>
        <Switch>
          <Public>
            <Route exact path="/"><Home /></Route>
          </Public>
          <Private>
            <Route path="/members"><Members /></Route>
          </Private>
        </Switch>
      </Router>
    );
  }
}
export default App;

Template pribadi dan umum saya sama kecuali untuk judul yang dikatakan pribadi dan yang lainnya umum.

class Private extends Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-md-2"><h2>PRIVATE</h2></div>
          <div className="col-md-8">{this.props.children}</div>
          <div className="col-md-2"></div>
        </div>
      </div>
    );
  }
}

export default Private;

Saya telah mencari sesuatu seperti ini untuk sementara waktu karena sepertinya solusi yang berpotensi rapi. Jika ada yang tahu bagaimana memperbaikinya saya akan sangat menghargainya. Terima kasih

Jawaban

1 TaghiKhavari Jan 18 2021 at 18:15

Inilah yang dilakukan SwitchKomponen:

          React.Children.forEach(this.props.children, child => {
            if (match == null && React.isValidElement(child)) {
              element = child;

              const path = child.props.path || child.props.from;

              match = path
                ? matchPath(location.pathname, { ...child.props, path })
                : context.match;
            }
          });

seperti yang Anda lihat, Switchkomponen hanya peduli pada tingkat pertama dari anak-anaknya dan mencari penyangga yang dipanggil path or fromdi dalamnya . jika tidak menemukannya, ia mengasumsikan bahwa setiap pathakan cocok. jadi itu selalu menunjukkan anak-anak pertama apa pun yang terjadi.

Yang perlu Anda lakukan adalah mengubah urutan anak-anak seperti ini:

<Switch>
  <Route exact path="/">
    <Public>
      <Home />
    </Public>
  </Route>
  <Route path="/members">
    <Private>
      <Members />
    </Private>
  </Route>
</Switch>