如何解决如何在React JS中制作相同的URL方案但使用不同的路由和组件
我有一些动态和静态URL,我很喜欢,但是对于如何在相同的路由结构上调用不同的组件感到困惑,请看下面的
**必需的路线结构:**
https://example.com/:pagename (dynamic)
https://example.com/:countryname (dynamic)
https://example.com/about-us (static)
当前路线:
<Route path='/:pageName' component={Page} exact />
<Route path='/:countryname' component={Country} exact />
<Route path='/about-us' component={AboutUs} exact />
谢谢
解决方法
执行此操作的更好方法是如下更改URL逻辑:
https://example.com/page/:pagename
或https://example.com/p/:pagename
https://example.com/country/:countryname
或https://example.com/c/:countryname
和路线:
<Route path='/page/:pageName' component={Page} exact />
<Route path='/country/:countryname' component={Country} exact />
Route算法在与查询匹配的第一个URL模式处停止。考虑以下两个URL:
这两个URL都匹配第一个模式(https://example.com/:pagename
),因为匹配算法不会知道“德国”不是页面名称。
如果您不能采用这种方式,则可以构建一个子路由组件,该组件将检查example.com之后的第一个参数是否匹配任何国家/地区名称或任何页面名称,并根据该参数呈现相应的组件:
<Route path='/:pageNameOrCountryNameNotSure' component={SubRouter} exact />
但是,这不是一个干净的解决方案,不推荐。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。