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，则会加载第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 }
  }}
/>

在不刷新页面的情况下反应路线

1 个答案: