【问题标题】：React router Link only renders the route specified in parent componentReact router Link 只渲染父组件中指定的路由
【发布时间】：2022-07-20 00:04:35
【问题描述】：

我有这个结构所在的反应应用程序 EnglishRoute -> Mainpage -> Treatments -> TreatmentItem

在EnglishRoute，我有：

        <p>english route</p>
        <Switch>
            <Route path=`en` exact>
                <MainPage />  
            </Route>
            <Route path=`en/quote`>
                <NewQuote />
            </Route>
            <Route path=`en/rendering`>
                <Regions />
            </Route>
        </Switch> ```

在我的 TreatmentItem.js 我有：

     <li>
          <Link to=`en/rendering`>Rendering React</Link>
        </li>
      </ul>

    <Switch>
      <Route path=`en/rendering`>
          <Regions />
      </Route>
    </Switch>

我希望能够从 TreatmentItem.js 呈现组件，但确实如此不行。但是当EnglishRoute内部有相同的en/rendering>时，它得到相同的组件渲染并且一切都很好加载......

正确放置网址。

我觉得我忘记了一些非常愚蠢的事情，我该怎么做才能解决这个问题？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

问题

在Switch 组件内部的路由路径顺序和特异性很重要。在这种情况下，您已将exact 属性添加到Route 渲染MainPage 上的路径"/en"。当您单击链接并导航到 "/en/rendering" 时，路径不再完全匹配 "/en" 并且 MainPage 组件被卸载。

这就是为什么path="en/rendering" 路由在它自己的外部使用Switch 时有效，但在MainPage/../TreatmentItem 渲染时无效。

解决方案

Switch 内部的路由路径顺序和特殊性很重要。如果订购正确，几乎零需要使用 exact 道具。以路径特异性的相反顺序重新排列路线，即 more 特定路线应列在 less 之前具体路线。移除 exact 属性。

例子：

<Switch>
  <Route path="en/quote" component={NewQuote} />
  <Route path="en" component={MainPage} />
</Switch>

现在当路径为"/en/rendering" 时，它不会匹配"/en/quote"，并且路由匹配将继续向下并由"/en" 匹配并渲染MainPage 组件。由于MainPage 正在渲染TreatmentItem 和另一个Switch，在"/en/rendering" 上带有Route，因此此路径也匹配，并且Regions 组件被渲染。

【讨论】：