如何修复React Router中'exact'路由冲突导致页面无法显示的问题？

哈哈，这个问题我之前也踩过坑！核心是你没搞懂React Router嵌套路由的匹配逻辑，咱们一步步来理清楚：

问题根源 #

你外层的<Switch>里给<Form>加了exact path="/"，这意味着只有当URL严格等于/时，才会渲染<Form>组件。而当你访问/businesses/:businessesId时，外层<Switch>找不到匹配的路由（外层只有/和/booking），所以<Form>根本不会被渲染——那它内部的<Switch>和<Businesses>路由自然也不会生效，这就是为什么<Businesses>完全看不到的原因。

解决方案 #

根据你的需求，有两种常用的解决方式：

方案一：把路由移到外层（推荐如果不需要依赖Form的状态/布局） #

如果<Businesses>不需要和<Form>共享状态或布局，直接把它放到外层<Switch>里，让它独立匹配路径：

<Switch>
  <Route exact path="/">
    <Form />
  </Route>
  {/* 把Businesses路由移到外层，Switch会按顺序匹配路径 */}
  <Route path="/businesses/:businessesId">
    <Businesses />
  </Route>
  <Route path="/booking">
    <Booking />
  </Route>
</Switch>

// Form内部的Switch只处理自己的子路由
// inside of <Form/>
<Switch>
  <Route exact path="/">
    <Selection/>
  </Route>
</Switch>

方案二：保留嵌套结构，调整外层Form路由的匹配规则 #

如果<Businesses>必须嵌套在<Form>里面（比如需要共享Form的导航、上下文状态等），那要去掉外层<Form>路由的exact，同时调整外层路由的顺序（把更具体的路由放在前面）：

// 外层Switch：先匹配具体的/booking，再用/作为兜底路由
<Switch>
  <Route path="/booking">
    <Booking />
  </Route>
  {/* 去掉exact，让所有/开头的路径都能触发Form渲染，交给内部Switch处理子路由 */}
  <Route path="/">
    <Form />
  </Route>
</Switch>

// inside of <Form/>
<Switch>
  <Route exact path="/">
    <Selection/>
  </Route>
  <Route path="/businesses/:businessesId">
    <Businesses/>
  </Route>
</Switch>

小提醒：嵌套路由的正确姿势 #

React Router的嵌套路由逻辑是：父路由匹配成功后，才会渲染对应的组件，然后由组件内部的子路由处理更具体的路径。所以父路由的path不要随便加exact，否则子路径无法触发父组件渲染，子路由自然也就失效了。

如果想让路由结构更清晰，也可以给Form的子路由加个统一前缀（比如/form），避免根路径的冲突，这里就不展开啦~

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