Yönlendiriciye farklı yollar için farklı şablonlarla tepki verme v.5

Question

Merhaba Bu soruyu gördüm ve tam olarak aradığım şey bu ama işe yaramıyorum. Ana Sayfalar / Şablonlarla Router V4 Yönlendiricilere Tepki Verin

5.2 sürümünü kullanıyorum

Uygulama bileşeni, gezinmeyi içerir ve iki şablon bileşeniyle, 'Genel' ve 'Özel' olmak üzere iki yolu sarar ve her bağlantıya tıkladığımda, o sayfanın kendi şablonu tarafından sarılmasını beklerim, bunun yerine yalnızca ilk bağlantı çalışır ve şablonu gösterir. İkinci bağlantı yalnızca tarayıcının adres çubuğundaki url'yi değiştirir ve yalnızca ilk şablonun içeriği sayfada kalır ve ikinci sayfanın içeriği gösterilmez. Bağlantıların sırasını değiştirirsem her zaman yalnızca üst bağlantı doğru şablonu alır.

Rotaları ve bunlara bağlantıları tanımladığım yer burasıdır.

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;

Özel ve genel şablonlarım, birinin özel ve diğerinin genel olarak söylediği başlıklar dışında aynı.

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;

Potansiyel olarak temiz bir çözüm gibi göründüğü için bir süredir böyle bir şey arıyordum. Bunu nasıl düzelteceğini bilen biri varsa, gerçekten minnettar olurum. Teşekkürler

Answer 1

SwitchComponent'in yaptığı şudur :

          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;
            }
          });

gördüğünüz gibi, Switchbileşen yalnızca çocuklarının ilk düzeyiyle ilgileniyor ve path or fromiçinde adı verilen bir destek arıyor . bulamazsa her şeyin patheşleşeceğini varsayar . bu yüzden ne olursa olsun her zaman ilk çocukları gösterir.

Yapmanız gereken, çocukların sırasını şu şekilde değiştirmek:

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