[英]How to make same URL scheme but different route and component in React JS
我有一些动态和 static URLS,我很清楚,但对如何在同一路由结构上调用不同的组件感到困惑,请看下面
**必需的路线结构:**
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 />
路由算法在与查询匹配的第一个 URL 模式处停止。 考虑以下两个 URL:
这两个 URL 都匹配第一个模式( https://example.com/:pagename
),因为匹配算法不会知道“germany”不是页面名称。
如果你不能 go 这种方式你可以构建一个子路由组件来检查 example.com 之后的第一个参数是否匹配任何国家名称或任何页面名称,并基于该呈现相应的组件:
<Route path='/:pageNameOrCountryNameNotSure' component={SubRouter} exact />
但是,这不是一个干净的解决方案,不推荐使用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.