如何使用动态 url 路由正确管理状态答案

【问题标题】：How to properly manage state with dynamic url routes如何使用动态 url 路由正确管理状态
【发布时间】：2021-02-12 19:26:17
【问题描述】：

您好，我正在尝试使用带有两个组件的侧边栏实现类似于 Google Keep 的应用

TagList（用于显示 Notes 的标签名称）
ColorList（用于显示音符颜色）

如上图。有以下路线

如果选择了全部（无论是在标签还是颜色部分）=没有路由参数

示例路线

/（标签 = 全部，颜色 = 全部）

/tag/:tag（标签 = :tag，颜色 = 全部）

/color/:color（标签 = 全部，颜色 = :color）

/tag/:tag/color/:color（标签 = :tag ，颜色 = :color ）

我使用了如下组件结构

<NoteContextProvider value={this.state}>
       <Topbar />
       <Sidebar />
       <Content>
         <NoteList/>
       </Content>
     </NoteContextProvider>

使用以下状态形状。

      tagsLoaded: false,
      tags: [],
      selectedTag: { id: 0, text: "All" },
      setSelectedTag: (tag) => {
        this.setState({ selectedTag: { ...tag } });
      },
     
      colorsLoaded: false,
      colors: [],
      selectedColor: { id: 0, display: "Default", code: "" },
      setSelectedColor: (color) => {
        this.setState({ selectedColor: { ...color } });
      }

我使用 Context API 将这些状态传递给所有组件。

我从侧边栏适当地调用 setSelectedTag 或 setSelectedColor。在我尝试引入上述 URL 路由之前，它工作正常。

我还想将用户重定向到 All，以防 url 中给出无效的标记/颜色。

任何人都可以提出一个干净的方法来实现同样的目标吗？

【问题讨论】：

您是否检查了 google keep 的实施？检查带有多个标签的不同标签的网址。我认为谷歌为此使用查询参数。
@KirillSkomarovskiy 没有 Google Keep 正在使用路由参数而不是查询参数..

标签： reactjs

【解决方案1】：

我建议考虑将多个路径传递给 react-router，它会按顺序选择它们。您有几个选项，但您可以执行以下操作：

<Route path={['/', 'color/:color', 'tag/:tag', '/color:color/tag:tag']} exact>

您还可以考虑嵌套路由器或在查询字符串中传递参数之一。

【讨论】：

感谢您的回复。您能否解释一下如何在侧边栏中正确设置活动状态以及侧边栏组件的放置位置..
当然！所以我建议安装 react-router 和 react-router-dom 并在这里浏览一下文档：reactrouter.com/web/api/Hooks/useparams 以了解如何使用 useParams 钩子从 url 中提取这些参数 :color 和 :tag 。为了在侧边栏中设置状态，我建议使用 react-router-dom 中的 NavLink 组件。一个快速而肮脏的解决方案类似于：<NavLink to={`/tags/${tag ? tag : 'all'}/colors/${color.id}`}>{color.name}</NavLink>，因为您正在从该组件中的 url 中提取标签。
感谢您的建议。我仍然不确定我们如何在这里使用 NavLink，因为标签需要考虑其他（选定的颜色），反之亦然。所以我们也需要将选定的标签/颜色保持在状态或只是在 Route 中？
我会把它保持在状态（或者只是让它默认为“全部”）：```const { tag='all', color='all'} = useParams();