使用多重Routes

这种方式是采用嵌套Routes的方式使用的。在react-routerV6的版本中。需要像下面这样写。

  1. <Route
  2.             path="detail/*"
  3.             element={
  4.               <Suspense fallback={<h1>loading......</h1>}>
  5.                 <Detail />
  6.               </Suspense>
  7.             }
  8.           />

然后我们在Detail组件中就可以继续使用Routes进行嵌套。注意：detail/*的书写方式。
然后就在Detai组件中继续嵌套。

  1.  <Routes>
  2.         {/* index的优先级要高一点 */}
  3.         <Route index element={<h1>我是detail默认的内容</h1>} />
  4.         {/* index写入多个的话，只会有第一个生效 */}
  5.         <Route path=":id" element={<A ref={h1Ref} />} />
  6.         <Route
  7.           path="/"
  8.           element={
  9.             <h1>我是detail的根路径，这里的/是相对于detail父路径匹配的内容</h1>
  10.           }
  11.         />
  12.       </Routes>

这样的话，就实现了detail中的路由嵌套了。
这种方式就是需要写多个Routes，但是路由的层级关系的话，在每个组件很清楚。

注意：

  1. 嵌套的Routes的根路径是相对于外层的Routes来的。也就是说，Detail组件内的Route路径总是相对于/detail来进行路由的分发的。

    使用Outlet进行子路由的占位

    1. <Route
    2.          path="edit"
    3.          element={
    4.            <Suspense fallback={<h1>loading......</h1>}>
    5.              <Edit />
    6.            </Suspense>
    7.          }
    8.        >
    9.          <Route
    10.            index
    11.            element={<main>我是没有子路由匹配的时候时候展示的默认页面</main>}
    12.          />
    13.          <Route
    14.            path=":editId"
    15.            element={
    16.              <Suspense fallback={<h1>loading......</h1>}>
    17.                <EditItem />
    18.              </Suspense>
    19.            }
    20.          />
    21.        </Route>

    这是App组件中的edit路由，里面有子路由，edit/:editId。
    我们直接像这样写的话，不会渲染editItem组件，除非我们在edit组件内，添加Outlet组件，表示editItem子路由占据的位置。
    1. <div>
    2.    <div>edit page</div>
    3.    <Link to="132">
    4.      <h2>editItem</h2>
    5.    </Link>
    6.    <input
    7.      type="text"
    8.      value={searchParams.get('filter') || ''}
    9.      onChange={e => {
    10.        const filter = e.target.value
    11.        if (filter) {
    12.          setSearchParams({ filter })
    13.        } else {
    14.          setSearchParams({})
    15.        }
    16.      }}
    17.    />
    18.    <button type="button" onClick={handleNavigateDetail}>
    19.      我跳转去detail页面
    20.    </button>
    21.    {/* Outlet的主要作用是ui的一个展示。 */}
    22.    <Outlet />
    23.  </div>