时间戳

首页 > 解决方案 > 带有下一个路由器的默认布局（页眉、页脚）

reactjs - 带有下一个路由器的默认布局（页眉、页脚）

问题描述

我搜索了类似的问题，但最终无法理解如何实现我所需要的。抱歉重复或非常菜鸟的问题。

我正在尝试从 CRA 迁移到 Next，所以我从路线开始。

在 CRA 的 App.js 中，我有：

const DefaultLayout = ({withSlider, component: Component, ...rest}) => {  
    return (
     <Route {...rest} render={matchProps => (
       <Fragment>
         <Nav withSlider={withSlider}/>
         <Component {...matchProps} />
         <Footer />
       </Fragment>
   )} />
  )
};

然后我像这样组织应用程序中的所有路线：

 <Router>
   <Switch>
     <DefaultLayout exact path="/" withSlider={true} component={MainPage} />
     <DefaultLayout exact path="/people" withSlider={false} component={People} />
     <DefaultLayout exact path="/news" withSlider={false} component={News} />
     <DefaultLayout exact path="/news/:uid" withSlider={false} component={Article} />
   </Switch>
  </Router>

所以关于Next的两个问题

  1. 如何使用参数 withSlider 发送到组件来实现 DefaultLayout？
  2. 如何将 URL 中的 :uid 参数发送到组件（稍后通过 match.params 获取）？

ps 我知道next-routes，但我认为这个功能非常普遍，以至于它必须以某种方式在 next-router 本身中实现

标签： reactjsnext.js

解决方案

在我看来，我找到了 2 的答案。 https://github.com/zeit/next.js/tree/canary/examples/parameterized-routing

推荐阅读