我遇到了一个小问题。我的Root
组件包含Switch
和两个Route
。当用户加载页面时,我想呈现初始<Route path="/" />
此路由包含一个Route
指向我想要显示的库的组件。
当用户点击图像时,路线改变,并且基于路线的另一组图像改变。这按预期工作。但是当使用<Route path="/login" />
内的第二个Root
时,路径会发生变化,但会初始化。由于路径不匹配,甚至未呈现图库,但会呈现Header
和HeaderAbout
。怎么样?
class Root extends Component {
render() {
return (
<div>
<Navigation />
<Switch>
<Route component={Home} path="/" />
<Route component={Login} exact path="/login" />
</Switch>
<Footer />
</div>
);
}
}
在初始路线
class Home extends Component<Props> {
_scrollDown = event => {
event.preventDefault();
this.gallery.scrollIntoView({ behavior: 'smooth' });
};
render() {
return (
<div>
<Header onClick={event => this._scrollDown(event)} />
<HeaderAbout />
<Route
render={props => (
<div
ref={node => {
this.gallery = node;
}}
>
<RelayGallery {...props} />
</div>
)}
path="/home/:galleryRef?"
/>
</div>
);
}
}
答案 0 :(得分:1)
像这样改变
<Route component={Login} exact path="/login" />
<Route component={Home} path="/" />
Switch的独特之处在于它只提供路由。在 相比之下,每一个与位置相匹配的东西都是包含在内的。
答案 1 :(得分:0)
您可以保留自己的路线结构,只需添加“确切的”&#39;支持您的家庭组件路线。然后路由器将只呈现具有确切&#39; /&#39;路由。