我正在学习一门课程,作者编写了一些使用 react-router
版本 3 进行路由的代码。
<Router history={browserHistory} >
<Route path="/" component={Main}>
<IndexRoute component={PhotoGrid}></IndexRoute>
<Route path="/view/:postId" component={Single}>
</Route>
</Router>
在学习课程(我正在使用router
版本4)时,我了解到现在<IndexRoute>
已经不存在了。我搜索了替代方案,并发现exact
是可替代的。但是我不知道如何使用exact
来满足这个要求。作者希望Main
组件始终存在于DOM中,并且根据URL只有子组件应该改变(即Single
或PhotoGrid
)。
我尝试了下面的代码,当然是错误的:
<BrowserRouter>
<Switch>
<Route path="/" component={Main} />
<Route exact path="/" component={PhotoGrid} />
<Route path="/veiw/:postId" component={Single} />
</Switch>
</BrowserRouter>
我的组件包括:
class Main extends React.Component {
render() {
return (
<div>
<h1>
<Link to="/">Reduxtagram</Link>
</h1>
{React.cloneElement(this.props.children, this.props)}
</div>
);
}
}
class PhotoGrid extends React.Component {
render() {
return <div className="photo-grid">PhotoGrid</div>;
}
}
class Single extends React.Component {
render() {
return <div className="single-photo">Single</div>;
}
}
Switch
来避免错误A <Router> may have only one child element
。但是从你的代码来看,我又遇到了这个错误。我认为我们需要将所有的组件/路由嵌套在一个单独的标签内,并放在BrowserRouter
中。 - The CoderMain
和PhotoGrid
是相邻的组件。要求是,PhotoGrid
应该是Main
的子组件。 - The Coderpath="/view/:postId"
仍然匹配/view/1234
。 - TholleMain
组件中遗漏了{React.cloneElement(this.props.children, this.props)}
,这导致子组件没有被添加。已经添加到问题中了。谢谢您的帮助。 - The Coder