서로 다른 경로에 대해 서로 다른 템플릿을 사용하여 라우터에 반응 v. 5
안녕하세요 저는이 질문을 보았고 이것이 정확히 제가 찾고있는 것이지만 작동하도록 할 수 없습니다. 마스터 페이지 / 템플릿으로 라우터 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;
잠재적으로 깔끔한 솔루션처럼 보이기 때문에 잠시 동안 이와 같은 것을 찾고있었습니다. 누구든지 이것을 고치는 방법을 알고 있다면 정말 감사하겠습니다. 감사
답변
Switch
Component의 기능은 다음과 같습니다 .
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>