서로 다른 경로에 대해 서로 다른 템플릿을 사용하여 라우터에 반응 v. 5

Jan 18 2021

안녕하세요 저는이 질문을 보았고 이것이 정확히 제가 찾고있는 것이지만 작동하도록 할 수 없습니다. 마스터 페이지 / 템플릿으로 라우터 V4 라우터 반응

버전 5.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;

잠재적으로 깔끔한 솔루션처럼 보이기 때문에 잠시 동안 이와 같은 것을 찾고있었습니다. 누구든지 이것을 고치는 방법을 알고 있다면 정말 감사하겠습니다. 감사

답변

1 TaghiKhavari Jan 18 2021 at 18:15

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>