react-router v6 loader不起作用？

Question

main.jsx

import {Route,createBrowserRouter,RouterProvider,createRoutesFromElements,} from 'react-router-dom';

const router = createBrowserRouter(
  createRoutesFromElements(
    <> 
      {/* ... */}
      <Route path="/*" loader={()=>{console.log('main');return'main'}} element={<Layout />}></Route>
    </>
  )
);


ReactDOM.render(<RouterProvider router={router} />,document.getElementById('root'))

Layout.tsx

<Routes>
  <Route path="/a" element={<div>1</div>} loader={()=>{console.log('123');return'111'}}></Route>
</Routes>

运行代码可以看到只打印了一次 main

---

官网demo中loader和handle的用户都是在数据路由器中全部写好的

<Route path="/*" loader={()=>{console.log('main');return'main'}} element={<Layout />}>
    <Route ... loader={()=>{console.log('xxx')}}></Route> // * 这种写法才能执行
</Route>

似乎我这种通过组件内的Route并不支持，请问有没有什么办法能解决，或者能实现附加额外信息的功能

我的需求是想获取到参数路由的定义地址，即我有一条/a/:type的路由，当我使用/a/enable跳转时，我通过 useLocation().pathname 拿到的是/a/enable，但我想拿到 /a/:type

Answer 1

根据你提供的代码和描述，我认为问题可能出在Layout.tsx文件中。在这个文件中，你使用了<Routes>组件来定义路由，但是在该组件内部又使用了<Route>组件来定义子路由，并且在子路由中添加了loader属性。然而，根据React Router v6的文档，<Route>组件只能在顶层路由器中使用，不能在子路由器中使用。因此，你需要将<Route>组件移动到顶层路由器中，或者使用<Outlet>组件来渲染子路由。

至于如何获取参数路由的定义地址，可以使用useMatch()钩子函数来获取匹配当前路径的路由信息，包括路由的路径、参数等。具体来说，你可以在Layout.tsx中使用useMatch()函数来获取当前匹配的路由信息，并从中获取路由的路径参数。我写了一个示例代码：

import { useMatch } from 'react-router-dom';

function Layout() {
  const match = useMatch('/a/:type');
  const routePath = match?.path; // 获取路由的定义路径

  return (
    <div>
      {/* ... */}
      <Routes>
        <Route path="/a" element={<div>1</div>} />
        {/* ... */}
      </Routes>
    </div>
  );
}

你要注意，useMatch()函数返回的是一个对象，如果当前路径不匹配任何路由，则返回null。因此，需要使用可选链运算符（?.）来访问路径参数。