时间戳

首页 > 解决方案 > 在不刷新页面的情况下反应路由

reactjs - 在不刷新页面的情况下反应路由

问题描述

我有以下 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，为了这个问题，我不想实现它。

注意：我真的不明白为什么有人会对这个问题给出负面评价而不说它有什么问题。

标签： reactjsreact-router

解决方案

如果您希望浏览器路由器管理您的导航，则必须使用 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 }
  }}
/>

推荐阅读