IT技术 - 同时react-router列表和详细路由 - 吾爱随笔录

我有react-router 4 的问题。我不确定它是否可以解决：

这是我的应用程序布局：

这基本上有效。但问题是，每当我/items/:id/通过左侧的链接点击它时，它也会匹配/items. 这会导致侧栏中的链接列表重新呈现。解决方案是嵌套路由。但由于接口/DOM，这是不可能的。左侧边栏需要独立于项目详细信息。我需要将它们分开，例如：

<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>

非常感谢您的帮助！

//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)