在不刷新页面的情况下响应路由

Question

我有以下 React 结构

App.js 
-> 
    Skeleton.js 
    ->
        1) Sidebar.js
        2) Content.js
        -> 
            1) Page1.js
            2) Page2.js
            3) Page3.js

路由是在 App.js 中完成的，如下所示：

<BrowserRouter>
      <Fragment>
      <Route exact path="/" component={Skeleton} />  
      <Route path="/:type" component={Skeleton} />
    </Fragment>
  </BrowserRouter>

我有这样的侧边栏项目

<ListItem
  button
  className={classes.nested}
  component="a" href="/Equity-Runs"
>
  <ListItemIcon>
    <DescriptionIcon />
  </ListItemIcon>
  <ListItemText
    className={classes.child}
    inset
    primary="Page1"
  />
</ListItem>

一切都按预期工作，如果您单击侧栏中的 Page1，它会加载 Page1，如果您单击 Page2 会加载 Page 2，等等...

现在，每次单击侧边栏中的链接时，页面都会变成空白然后加载。我想这样做，当您单击页面时，仅 Content.js 重新加载，因此页面的其余部分不会变为空白并被加载。每次从侧边栏中单击页面时，只有内容区域会发生变化。

我猜我必须将路由逻辑移动到内容文件中，但问题是我需要知道用户在侧边栏和 AppBarPanel 文件中所在的页面。我现在还没有设置 Redux，为了这个问题，我不想实现它。

注意：我真的不明白为什么有人会否定这个问题而不说明它有什么问题。

Answer 1

如果您希望浏览器路由器管理您的导航，则必须使用 LInk 组件而不是 a，如下所示。

https://reacttraining.com/react-router/web/api/Link/to-string

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>