![](/img/trans.png)
[英]In React router's latest version, how to nest routes in the homepage “/”
[英]How to nest React Routes in homepage
我试图弄清楚如何在首页中正确嵌套路由。 这是我的路由器:
var appRouter = (
<Router history={ hashHistory }>
<Route path="/" component={ Navbar }>
<IndexRoute component={ Homepage }/>
<Route path="items" component={ Homepage }>
<Route path=":item" component={ ItemShow }/>
</Route>
<Route path="nothome" component={ NotHome }/>
</Route>
</Router>
)
都有一个都指向Homepage的IndexRoute和Route似乎不是最佳选择,但它可以为我提供所需的行为。 这是我的整个项目(我写这个只是为了说明这一点)。
//React
var React = require("react");
var ReactDOM = require("react-dom");
//Router
var ReactRouter = require('react-router')
var Router = ReactRouter.Router
var Route = ReactRouter.Route
var IndexRoute = ReactRouter.IndexRoute
var hashHistory = ReactRouter.hashHistory
var Link = ReactRouter.Link
var items = [1, 2]
var Navbar = React.createClass({
render(){
return(
<div>
<Link to="/"><h1>Navbar</h1></Link>
{this.props.children}
</div>
)
}
})
var Homepage = React.createClass({
render(){
return(
<div>
<h2>This is the homepage</h2>
<ItemList/>
<Link to="/nothome">Another page</Link>
{this.props.children}
</div>
)
}
})
var ItemList = React.createClass({
render(){
return(
<ul>
{items.map( item => {
return <Item key={item} id={item}></Item>
})}
</ul>
)
}
})
var Item = React.createClass({
handleClick(){
hashHistory.push("items/" + this.props.id)
},
render(){
return(
<li onClick={this.handleClick}>Item {this.props.id}</li>
)
}
})
var ItemShow = React.createClass({
render(){
return(
<div>
You clicked on item {this.props.params.item}
</div>
)
}
})
var NotHome = React.createClass({
render(){
return(
<h2>This is not the homepage</h2>
)
}
})
var appRouter = (
<Router history={ hashHistory }>
<Route path="/" component={ Navbar }>
<IndexRoute component={ Homepage }/>
<Route path="items" component={ Homepage }>
<Route path=":item" component={ ItemShow }/>
</Route>
<Route path="nothome" component={ NotHome }/>
</Route>
</Router>
)
document.addEventListener("DOMContentLoaded", ()=>{
ReactDOM.render(appRouter, document.getElementById("root"))
})
另一个选择是将Homepage组件放置在我的ItemShow组件的顶部,而不嵌套路线,但这似乎同样糟糕,甚至更糟。
似乎必须有一种更好的方法来获得此行为。 它是什么?
在寻找代码时,您似乎并不需要这个“ items”路由,因为“ /”和“ / items”都呈现相同的组件( <Homepage>
)。
因此,如果要避免有两个“ Homepage
”声明,则可以在用户转到“ /”时将其重定向到“ items”。 您可以使用<IndexRedirect>
或<Redirect>
或onEnter
挂钩来实现。
有关钩子的更多信息:
https://github.com/reactjs/react-router/blob/v2.5.2/docs/guides/IndexRoutes.md#index-redirects
如果您确实希望能够访问指向同一组件的这两条路线,那么您不必进行任何更改。 但是,在您的情况下,我将拥有一个“主页”(甚至带有一些虚拟信息)和一个“项目主页”,并且可以避免“主页”重复。
顺便说一句,作为提示,我将您的<NavBar>
重命名为“ <App>
”或类似的名称,因为更好地理解您的代码!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.