Question

我搜索了类似的问题，但最终还是不明白如何实现我所需要的。很抱歉重复或非常菜鸟问题。

我试图从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的两个问题

我如何使用带有带滑块的参数的DefaultLayout来实现DefaultLayout？
如何将URL中的：uid参数发送到组件（以便稍后通过match.params获取）？

p.s。我知道next-routes，但是我认为此功能非常普遍，以某种方式必须在下一路由器本身中实现

Answer 1

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

下一个路由器的默认布局（页眉，页脚）

1 个答案: