同时反应路由器列表和详细路由 [英] React Router List and Detail Route at the same time
问题描述
我对 react router 4 有问题.我不确定它是否可以解决:
这是我的应用程序布局:
这基本上有效.但问题是,每当我通过左侧的链接点击 /items/:id/
时,它也会匹配 /items
.这会导致侧栏中的链接列表重新呈现.解决方案是嵌套路由.但由于接口/DOM,这是不可能的.左侧边栏需要独立于项目详细信息.我需要将它们分开,例如:
<div className={styles.sidebar}><HeaderContainer/><切换位置={位置}><路由精确路径="/" component={Homepage}/><Route path="/items" component={Items}/></开关><div className={styles.content}><Route path="/items/:id" component={ItemDetail}/>
非常感谢您的帮助!
我有一个类似的布局,我使用了这样的东西
//App.jsx<Router path="/" component={Page}>//页面.jsx<布局><主视图><细节视图></布局>//主视图.jsxcomponentDidMount() {const { dispatch } = this.propsconst 数据 = 等待 api.getData();调度(更新细节(数据));}连接()(主视图)//细节视图.jsx从'react-redux'导入{连接};使成为() {return <ul>{this.props.list.map((item) => <li>{item}</li>)}</ul>;}//将你需要的 props 映射到 redux stateconst mapStateToProps = (状态) =>({ 列表: state.data.list });连接(mapStateToProps)(DetailView)
I have an issue with react router 4. And I'm not sure if its solvable:
This is my application layout:
Which basically works. But the problem is that whenever I hit /items/:id/
via the link on the left side it also matches /items
. Which causes the link list in the sidebar to rerender. The solution would be to nest the routes. But this is not possible due to the interface/DOM. The left sidebar needs be independent of the item detail. And I need to split those up like:
<div>
<div className={styles.sidebar}>
<HeaderContainer />
<Switch location={location}>
<Route exact path="/" component={Homepage} />
<Route path="/items" component={Items} />
</Switch>
</div>
<div className={styles.content}>
<Route path="/items/:id" component={ItemDetail} />
</div>
</div>
Thanks a lot for your help in advance!
I had a similar layout and I used something like this
//App.jsx
<Router path="/" component={Page}>
//Page.jsx
<Layout>
<MasterView>
<DetailView>
</Layout>
//MasterView.jsx
componentDidMount() {
const { dispatch } = this.props
const data = await api.getData();
dispatch(updateDetail(data));
}
connect()(MasterView)
// DetailView.jsx
import { connect } from 'react-redux';
render() {
return <ul>{this.props.list.map((item) => <li>{item}</li>)}</ul>;
}
// map the props you need to redux state
const mapStateToProps = (state) => ({ list: state.data.list });
connect(mapStateToProps)(DetailView)
这篇关于同时反应路由器列表和详细路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!