Phản ứng bộ định tuyến với các mẫu khác nhau cho các tuyến đường khác nhau v. 5

Question

Xin chào Tôi đã xem câu hỏi này và đây chính xác là những gì tôi đang tìm kiếm nhưng tôi không thể làm cho nó hoạt động. Bộ định tuyến React Router V4 với Trang / Mẫu chính

Tôi đang sử dụng phiên bản 5.2

Thành phần ứng dụng bao gồm điều hướng và bao bọc hai đường dẫn với hai thành phần mẫu, 'Công khai' và 'Riêng tư' và khi tôi nhấp vào từng liên kết, tôi hy vọng trang đó sẽ được bao bọc bởi mẫu của nó nhưng thay vào đó chỉ có liên kết đầu tiên hoạt động và hiển thị mẫu. Liên kết thứ hai chỉ thay đổi url trong thanh địa chỉ trình duyệt và chỉ nội dung của mẫu đầu tiên vẫn còn trên trang và nội dung của trang thứ hai không hiển thị. Nếu tôi thay đổi thứ tự của các liên kết thì chỉ liên kết trên cùng mới có đúng mẫu.

Đây là nơi tôi xác định các tuyến đường và liên kết đến chúng.

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;

Các mẫu riêng tư và công khai của tôi giống nhau ngoại trừ các tiêu đề một người nói là riêng tư và công khai khác.

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;

Tôi đã tìm kiếm một cái gì đó như thế này trong một thời gian vì nó trông giống như một giải pháp có khả năng gọn gàng. Nếu có ai biết cách khắc phục điều này, tôi thực sự sẽ đánh giá cao nó. Cảm ơn

Answer 1

Đây là những gì SwitchThành phần làm:

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

như bạn thấy Switchcomponent chỉ quan tâm đến cấp độ đầu tiên của các thành phần con của nó và tìm kiếm một chỗ dựa được gọi path or fromtrong đó. nếu nó không tìm thấy nó, nó giả định rằng mọi thứ pathsẽ phù hợp. vì vậy nó luôn luôn hiển thị những đứa trẻ đầu tiên cho dù thế nào đi nữa.

những gì bạn cần làm là thay đổi thứ tự của những đứa trẻ như sau:

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