我应该如何使用React Router来调换我想要在头体和脚中显示的内容？

Posted 2021-04-13

根据我的理解，React Router适合于当你想重复使用一个容器，不同的路由会改变容器内显示的内容。但是，我希望一个路由能够改变多个容器中的显示内容。

例如，在我的登录页面中，我的登录表单在主体容器中，而我的注册链接在页脚。

在我的注册页面中，我的注册表格在正文中，而登录链接在页脚。

在我的主页中，我在正文中设置了欢迎信息，在页脚设置了一些更换标签的按钮。

这其中涉及到的组件结构有什么好的做法？

答案

的最佳实践。React 是做重用组件，帮助你不浪费你的时间在编码上，只是挑选和重用组件在许多不同的情况下。根据你的例子，在登录页面和注册页面中，页脚的设计可能是一样的，但只有链接是不同的。我们可以创建一个名为 LinkInFooter 并接收一个数组链接对象来显示。

  // file /pages/login.js
  <PageLayout>
     <LoginComponent/>
     < LinkInFooter links={[url: '/registration', label: 'registration page']}/>
  </PageLayout>

   // file /pages/registration.js
  <PageLayout>
     <RegistrationComponent/>
     <LinkInFooter links={[url: '/login', label: 'login page']}/>
  </PageLayout>

下面为大家介绍几个小技巧。

• 应该有一个 WrappedLayout 对于所有的页面，我并不是说所有的页面都应该是相同的布局，而是应该在很多页面上有相同的布局。那 WrappedLayout 将使您的页面在改变路径或隐藏显示儿童时看起来一致。components.

• Layouts/*.js : 布局目录是存放你所有自定义小组件的地方，你希望它们在你的项目中显示相同。比如说 我定制了一个 Select 组件，允许搜索项目，选择多个项目...。所以我创建了一个自定义的 <Select/> 布局来代替html的 <select/> 在我的项目上。

• Components/*.js这个文件存放了你所有的组件，无论是可重复使用的还是不可重复使用的。一个组件可以由许多其他组件组成：可以重用的组件应该创建一个新的文件并导入使用。如果不能，创建一个内部组件就可以了。

• 在开始之前，花5分钟时间了解一下UI设计。利用最初的时间来想象页面的结构，然后回答这些问题。

  • 这个页面应该有多少个组件？
  • 可以经常重复使用吗？
  • 哪些项目的设计应该是 layout?