组件在重定向到同一页面时未呈现

Question

我正在开发一个反应应用程序。所以我的主页中有这些组件

1. 侧边栏
2. 边栏建议
3. 标签
4. 标签建议

我的主路由是这样的：

<Router>
    <Route path={["/", "/home", "/tags/:tagId"]} component ={Home}/>
</Router>

我的 Home 组件是：

<Sidebar {some Props} />

  <Router>
    <Switch>
      <Route
         exact
         path={["/", "/home"]}
         render={(props) => (
           <Suggestions {some props} />
         )}
      />
      <Route exact path="/tags/:tagId" component={TagsSuggestion} />
    </Switch>
  </Router>

<Tags { some props}  />

所以每当我点击侧边栏中的任何数据时，我都希望呈现侧边栏建议

每当我点击标签组件中的任何标签时，它都会重定向到带有标签 ID 的“/tags/:tagId”。

问题： 一开始，边栏建议正在显示（我想要），但每当我点击标签时，边栏建议组件不会被删除，但 URL 会发生变化。而且我必须手动重新加载页面才能看到标签建议组件。

沙盒版本链接：https://codesandbox.io/s/unruffled-wave-v9m3r?file=/src/Tags.js

Answer 1

为了使history.push 能够按预期运行，它应该放置在Router 组件中。只需将 Tags 组件移动到 Router 中，这样它就有了一个可以使用的路由器上下文。

class Home extends Component {
  render() {
    return (
      <div className="Home">
        <Sidebar />
        <Router>
          <Switch>
            <Route path="/tags/:id" component={TagsSuggestion} />
            <Route path="/" component={SidebarSuggestion} />
          </Switch>
          <Tags />
        </Router>
      </div>
    );
  }
}