javascript 如何在react路由器v6中添加部分动态网段？

xdnvmnnf 于 2023-03-11 发布在 Java

关注(0)|答案(1)|浏览(83)

我有一对夫妇的网址，我需要他们被路由到两个不同的组成部分。
example.com/xyz/2023-03-23 -〉组件A
example.com/xyz/2023-03-23T09:00:00Z?timezone=Asia/Calcutta -〉组件B

<BrowserRouter>
   <Routes>
      <Route
        path={`${path}/:date?`}
        exact
        element={ <ComponentA /> }
      />

      <Route
        path={`${path}/:date'T'*`}
        exact
        element={ <ComponentB /> }
      />
   </Routes>
</BrowserRouter>

看起来我无法使用react router实现上述功能，因为不允许使用部分动态段。https://reactrouter.com/en/main/route/route#splats
如果我做条件渲染会增加代码的复杂性，有什么建议吗？

JavaScript

来源：https://stackoverflow.com/questions/75695934/how-to-add-partial-dynamic-segments-in-the-react-router-v6

1条答案

按热度按时间

sxpgvts31#

Route路径不支持部分段匹配，要么全匹配，要么全不匹配。请参阅动态段文档。
您已经应用了条件呈现，这就是react-router和路由所做的，基于当前URL路径有条件地呈现内容。这里的建议是在"/:date?"上呈现单个路由，在date参数中收集整个动态段，并在组件中的date路径参数上运行REGEX。
示例：

const DateComponent = (props) => {
  const { date } = useParams();

  // apply regular expression on date

  return dateIsA
    ? <ComponentA {...props} />
    : <ComponentB {...props} />;
};

<BrowserRouter>
   <Routes>
      <Route
        path={`${path}/:date?`}
        element={<DateComponent />}
      />
   </Routes>
</BrowserRouter>

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 如何在react路由器v6中添加部分动态网段？

1条答案

相关问题

热门标签

最新问答