React Router 中 Switch 组件按顺序匹配路由，若 / 路由排在 /cars 之前且未加 exact，则所有路径都会优先匹配根路由，导致子页面（如 /cars）无法渲染。
react router 中 `switch` 组件按顺序匹配路由，若 `/` 路由排在 `/cars` 之前且未加 `exact`，则所有路径都会优先匹配根路由，导致子页面（如 `/cars`）无法渲染。
在使用 React Router（v5）构建单页应用时，一个高频问题是：Navbar 中的 点击后 URL 正确跳转为 http://localhost:3000/cars，但页面内容却毫无变化——仍显示首页内容。你甚至能通过 onClick 日志确认链接已被触发，说明问题不在导航本身，而在于路由匹配逻辑失效。
根本原因在于
<Switch>
<Route path="/"> {/* ❌ 匹配所有以 "/" 开头的路径，包括 "/cars"、"/about" 等 */}
<Home />
</Route>
<Route exact path="/cars"> {/* ✅ 但永远执行不到这里 */}
<Cars />
</Route>
</Switch>由于 / 是最宽泛的路径前缀，/cars 也会被 / 匹配成功，因此
✅ 正确做法：按路径 specificity（特异性）从高到低排序
将更具体的路径（如 /cars、/about）放在前面，最通用的路径（如 /）放在最后：
<Switch>
<Route path="/cars" component={Cars} />
<Route path="/about" component={About} />
<Route path="/support" component={Support} />
<Route path="/register" component={Register} />
<Route path="/login" component={Login} />
<Route path="/" component={Home} /> {/* ✅ 作为兜底路由，放最后 */}
</Switch>? 提示：推荐使用 component 属性替代内联 JSX（如
），既语义清晰又避免意外重渲染；若需传参或条件逻辑，可改用 render 或 children 函数。 
shopify-app-react-router下载构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
⚠️ 注意事项：
- exact 并非万能解药，滥用会导致维护困难。仅当必须严格匹配（如 / 不能匹配 /home）且该路由位于其他更具体路径之后时才需添加；
- 若添加了 * 通配路由（404 页面），则 / 必须加 exact，否则 * 将永远不会触发；
- 确保所有 Nav.Link 均正确使用 as={Link} 和 to 属性（你已做到，这点没问题）；
- 检查浏览器控制台是否有 Router 相关警告（例如嵌套 Router、未包裹于 Router 等），但本例中结构正确。
最终修复后的 App.js 示例：
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
function App() {
return (
<Router>
<div className="App">
<NavBar />
<Switch>
<Route path="/cars" component={Cars} />
<Route path="/about" component={About} />
<Route path="/support" component={Support} />
<Route path="/register" component={Register} />
<Route path="/login" component={Login} />
<Route path="/" exact component={Home} /> {/* 只有此时需要 exact */}
</Switch>
</div>
</Router>
);
}
export default App;总结：路由顺序即匹配优先级。牢记「Specific before general」原则，合理组织
