Question

我开始了一个项目，本质上是这样构建的：

App.js
-> ListView.js
-> SingleEntryView.js
  -> (variable views using react router dom)
  -> NavComponent.js to switch between those views

我的网址：www.my-site.com/entry/<ID>/<view>和www.my-site.com/list

在www.my-site.com/entries处，列出了所有条目，在www.my-site.com/entry/<ID>/<view>中，您可以看到一些详细信息，具体取决于<view>。

此外，从本质上讲，导航是在视图之间切换的。因此，导航确实需要<ID>来切换例如从www.my-site.com/entry/<ID>/details到www.my-site.com/entry/<ID>/history。

我的方法

...首先在App.js组件上使用路由器：

<Route exact path='/list/' component={ListView} />
<Route exact path='/entry/:id/:view' component={SingleEntryView} />

然后，在SingleEntryView.js中，我可以访问this.props.match.id，可以将其传递给NavComponent，以创建到不同视图的RouterDom链接。

我将这样的匹配项传递给导航：

<NavComponent id={this.props.match.params.id} />

然后，我的导航使用路由器链接导航到不同的视图，如下所示（使用材料ui）：

<BottomNavigationAction
component={Link}
to={`/entries/${this.props.id}/details`}
label="details"
/>

此外，我创建了另一条路线来确定哪个视图显示在导航下方，我在SingleEntryView.js中这样做：

<Route path={`/entry/:id/detail`} component={DetailView}/>
<Route path={`/entry/:id/history`} component={HistoryView}/>
<Route path={`/entry/:id/foobar`} component={FooBarView}/>

我的问题

...是，每当我单击NavBar中的那些链接之一时，就会完全重新加载视图-包括componentDidMount（所有远程内容都被重新加载）。我该如何预防？我以为Link确实可以防止这种情况发生？

P.S .：我知道这可能不是最干净的解决方案-我是一名初学者，所以如果您有更好的主意，请告诉我：D

P.P.S .：我有点简化了，如果某处有错字：请原谅我：D

react-router-dom链接确实会重新加载站点

0 个答案: