reactjs - 同时 react 路由器列表和详细路由

Question

我在使用 React router 4 时遇到问题。我不确定它是否可以解决:

这是我的应用程序布局:

这基本上有效。但问题是，每当我通过左侧的链接点击 /items/:id/ 时，它也会匹配 /items。这会导致侧边栏中的链接列表重新呈现。解决方案是嵌套路由。但由于接口(interface)/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>

非常感谢您提前提供的帮助!

Answer 1

我有一个类似的布局，我使用了类似的东西

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