如何在 React JS 中制作相同的 URL 方案但不同的路线和组件

Question

I have some dynamic and static URLS, I am ibiut but confused how to call different component on same route structure, pleas have a look below

**Required Routes structure: **

https://example.com/:pagename (dynamic)
https://example.com/:countryname (dynamic)

https://example.com/about-us (static)

Current Route:

<Route path='/:pageName' component={Page} exact />
<Route path='/:countryname' component={Country} exact />
<Route path='/about-us' component={AboutUs} exact />

Thanks

Answer 1

The better way to do this is to change your URL logic as follows:

https://example.com/page/:pagename or https://example.com/p/:pagename

https://example.com/country/:countryname or https://example.com/c/:countryname

and the Routes:

<Route path='/page/:pageName' component={Page} exact />
<Route path='/country/:countryname' component={Country} exact />

The Route algorithm stops at the first URL-pattern that matches the query. Consider the following two URLs:

• https://example.com/homepage
• https://example.com/germany

Both of these URLs match the first pattern ( https://example.com/:pagename ) as the matching algorithm won't know that "germany" is not a pagename.

If you can't go this way you could build a sub-routing component which checks whether the first parameters after example.com matches any country name or any page name and based on that render the corresponding component:

    <Route path='/:pageNameOrCountryNameNotSure' component={SubRouter} exact />

However, this is not a clean solution and is not recommended .