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

Posted 2023-02-21

【中文标题】组件在重定向到同一页面时未呈现

【英文标题】：Component not rendering on redirecting to same page

【发布时间】：2021-01-20 23:20:42

【问题描述】：

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

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

我的主路由是这样的：

<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

【问题讨论】：

您可以尝试将这个问题重现到一个可以实时调试的运行代码和框吗？

我刚才添加了。你可以检查一下

【参考方案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>
    );
  

【讨论】：

哇，原来这么简单