ตอบสนองเราเตอร์ด้วยเทมเพลตที่แตกต่างกันสำหรับเส้นทางที่แตกต่างกัน v.5

Question

สวัสดีฉันได้เห็นคำถามนี้แล้วและนี่คือสิ่งที่ฉันกำลังมองหา แต่ฉันไม่สามารถใช้งานได้ ตอบสนองเราเตอร์ V4 ของเราเตอร์ด้วย Master Pages / Templates

ฉันใช้เวอร์ชัน 5.2

ส่วนประกอบของแอปประกอบด้วยการนำทางและรวมสองเส้นทางด้วยองค์ประกอบเทมเพลต 2 รายการคือ "สาธารณะ" และ "ส่วนตัว" และเมื่อฉันคลิกแต่ละลิงก์ฉันคาดว่าหน้านั้นจะถูกรวมไว้ด้วยเทมเพลต แต่จะมีเพียงลิงก์แรกเท่านั้นที่ใช้งานได้และแสดงเทมเพลต ลิงก์ที่สองจะเปลี่ยน URL ในแถบที่อยู่ของเบราว์เซอร์เท่านั้นและมีเพียงเนื้อหาของเทมเพลตแรกเท่านั้นที่ยังคงอยู่ในหน้าและเนื้อหาของหน้าที่สองจะไม่แสดง หากฉันเปลี่ยนลำดับของลิงก์เสมอเฉพาะลิงก์บนสุดเท่านั้นที่จะได้รับเทมเพลตที่ถูกต้อง

นี่คือที่ที่ฉันกำหนดเส้นทางและลิงค์ไปยังพวกเขา

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;

เทมเพลตส่วนตัวและแบบสาธารณะของฉันเหมือนกันยกเว้นชื่อเรื่องที่หนึ่งพูดว่าส่วนตัวและแบบสาธารณะอื่น ๆ

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;

ฉันมองหาบางอย่างเช่นนี้มาระยะหนึ่งแล้วเพราะดูเหมือนว่าจะเป็นวิธีแก้ปัญหาที่เรียบร้อย หากใครรู้วิธีแก้ไขฉันจะขอบคุณจริงๆ ขอบคุณ

Answer 1

นี่คือสิ่งที่SwitchComponent ทำ:

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

ตามที่คุณเห็นSwitchส่วนประกอบนั้นให้ความสำคัญกับระดับแรกของลูก ๆ เท่านั้นและมองหาเสาที่เรียกpath or fromในนั้น หากไม่พบก็ถือว่าทุกอย่างpathจะตรงกัน ดังนั้นจึงแสดงให้เห็นลูกคนแรกเสมอไม่ว่าจะเกิดอะไรขึ้น

สิ่งที่คุณต้องทำคือเปลี่ยนลำดับของเด็ก ๆ ดังนี้:

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