React Router访问/Service/UsedService错误加载NewService组件原因排查

• 导入组件的变量名和路由使用的变量名不匹配，存在引用错误：你代码中导入的是CreateNewSevice、CreateUsedService两个变量，但路由配置里用的是NewService、UsedService，如果没有额外的变量赋值操作，这两个变量本身是未定义的。你能正常渲染组件说明大概率是存在隐式的变量指向错误，比如两个路由实际引用的都是NewService组件。另外注意你导入CreateNewSevice时拼写错误，Service少写了字母r写成Sevice，也可能引发打包时的资源引用异常。
• 路由缺少精确匹配配置，存在高优先级的模糊匹配规则：<Switch>组件是从上到下匹配路由，只要匹配到第一个符合规则的路由就会停止匹配。如果你在两个Service路由之前配置了path为/Service且没有加exact属性的路由，或者误把NewService的路由path写成了/Service，所有/Service开头的路径都会优先匹配到这个路由。你提到首页也默认渲染NewService，说明大概率存在没有配置path的默认路由，或者缺少兜底路由，所有未匹配到的路径都会渲染NewService。
• Link的相对路径不符合预期：你写的to='./UsedService'是相对路径，跳转后的路径会和当前页面路径拼接，如果当前页面路径不是/Service/，跳转后路径无法匹配你写的路由规则，也会触发默认路由的渲染。

1. 修正组件导入的变量名和拼写问题，保证导入的变量名和路由中使用的一致：

import NewCars from './New/Cars';
import NewTrucks from './New/Trucks';
// 修正拼写，变量名和路由使用一致
import NewService from './Service/NewService';
import UsedService from './Service/UsedService';

2. 给所有路由添加exact属性开启精确匹配，同时添加兜底路由避免异常渲染：

<Switch>
   <Route exact path='/New/Cars' component={NewCars} />
   <Route exact path='/New/Trucks' component={NewTrucks} />
   <Route exact path='/Service/NewService' component={NewService} />
   <Route exact path='/Service/UsedService' component={UsedService} />
   {/* 兜底404路由，所有未匹配的路径都会走到这里 */}
   <Route path="*" component={NotFound} />
</Switch>

3. 将Link的相对路径改成绝对路径，避免受当前页面路径影响：

<Link to='/Service/UsedService'>Schedule Service Appointment</Link>

内容的提问来源于stack exchange，提问作者JustWantsToCode