React router v6 匹配多条路径而不重新渲染答案

【问题标题】：React router v6 match multiple paths without rerenderReact router v6 匹配多条路径而不重新渲染
【发布时间】：2022-01-20 11:41:53
【问题描述】：

在旧版本的反应路由器中，我能够做到以下几点：

<Switch>
   <Route path={["/search","/user/:userId"]}>
     <ResizeableWindows>
       <Switch>
         <Route path="/search">
           <SearchPage/>
         </Route>
         <Route path="/user/:userId">
           <UserPage/>
         </Route>
       </Switch>
     </ResizeableWindows>
   </Route>
   <Route path="/about">
     <AboutPage/>
   </Route>
</Switch>

通过这种方式，当用户在<UserPage/> 和<SearchPage/> 之间导航时，我可以防止<ResizeableWindows/> 组件被重新渲染（意味着它的状态没有被破坏）。

我似乎无法弄清楚如何在 react router v6 中完成相同的行为，因为 path 属性不能再是一个数组。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

我能够做到以下几点：

<Routes>
  <Route
    path="/"
    element={
      <ResizeableWindows>
        <Outlet />
      </ResizeableWindows>
    }
  >
    <Route path="search" element={<HomePage />} />
    <Route path="user/:userId" element={<UserPage />} />
  </Route>
  <Route path="/about" element={<AboutPage />} />
</Routes>

【讨论】：