Question

我想知道是否有可能以及如何做到这一点：

在我的页面结构中，我将有一个标题一个导航栏和一个容器仅用于内容和页脚

在导航栏中，我将显示以下部分：

关于产品的首页

并且我希望这些部分位于我的内容容器中，因此单击这些选项之一时不会重新加载页面，而只会重新加载内容

目前我拥有它

我的应用路线：

const AppRouter = () => (
  <BrowserRouter>
    <div>

      <Switch>
        <Route path="/" component={HomePage} exact={true} /> 
        <Route component={NotFoundPage} />
      </Switch>

    </div>
  </BrowserRouter>
);

我的主页

export default function Cards() {

    return (
        <>
        <Header/>
        <Navigation/>
        <Container maxWidth="lg" >
            <div className="contents">
            <Products/>
            </div>
        </Container>
        </>
    );
}

我希望仅在div内容中调用所有部分组件

和我的导航栏：

export default function Navigation() {
    const classes = useStyles();
    return (
        <AppBar position="static" className={classes.appBar} >
          <Container maxWidth="lg">
        <Toolbar >
 <Button  className={classes.button} variant="raised" disableFocusRipple="false"  disableRipple="false"  centerRipple="false"  color="secondary">
   Home
</Button>
<Button className={classes.button} variant="raised"  disableFocusRipple="false"  disableRipple="false"  centerRipple="false" color="secondary">
  Home
</Button>
<Button className={classes.button} variant="raised" disableFocusRipple="false"  disableRipple="false"  centerRipple="false" color="secondary">
  Home
</Button>
<Button className={classes.button} variant="raised" disableFocusRipple="false"  disableRipple="false"  centerRipple="false" color="secondary">
  Home
</Button>
        </Toolbar>
        </Container>
      </AppBar>
    );
}

是否可以使用redux来做到这一点？

带有图片的示例：

如果我点击首页1

仅更改产品所在的组件，而不更改整页

Answer 1

您可以将需要渲染的组件移到开关外部的每个页面上。

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Header/>
      <Navigation/>
      <Switch>
        <Route path="/" component={HomePage} exact={true} /> 
        <Route component={NotFoundPage} />
      </Switch>
    </div>
  </BrowserRouter>
);

Answer 2

您不需要redux来执行此操作，只需将上方的页眉，页脚和导航栏组件提升到定义路由的位置即可。这样一来，您只能在路线更改时更改应用程序内容，并且可以使用location对象反映对页眉，导航栏和页脚的更新。

const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Header/>
      <Navigation/>

      <Switch>
        <Route path="/" component={HomePage} exact={true} /> 
        <Route component={NotFoundPage} />
      </Switch>

      <Footer/>
    </div>
  </BrowserRouter>
);

反应js，钩子，一个div来接收所有组件部分

2 个答案: