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

Question

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

边栏
边栏建议
标签
标签建议

我的主要路线是这样的：

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

因此，每当我单击边栏中的任何数据时，我都希望呈现边栏建议

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

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

Link 对于沙盒版本：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>
    );
  }
}

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

Component not rendering on redirecting to same page

redirect

render

reactjs

react-router