使用道具将私有路由从 react-router v5 转换为 react-router v6

Question

我有react-router v5中的路线列表

const agrRouterConfig = [
  {
    path: '/',
    component: Agreements,
    exact: true,
  },
  {
    path: '/agreements/:id',
    component: AgreementPdfPage,
  },
];

export default agrRouterConfig;

我通过这样的自定义路线传递它们，但重要的是我有重要的 state 作为道具setShowAgreement传递：

const RouteWithSubRoutes = (route: any) => {
  return (
    <Route
      path={route.path}
      exact={route.exact}
      render={(props) => (
        <route.component 
          {...props} 
          routes={route.routes} 
          setShowAgreement={route.setShowAgreement} 
        />
      )}
    />
  );
};

在应用程序内部：

const Routes = () => {
  const [showAgreement, setShowAgreement] = useState(false);
///// some code 

  if (showAgreement) {
    return (
      <Switch>
        {agrRouterConfig.map((route, i) => (
          <RouteWithSubRoutes key={i} {...route} setShowAgreement={setShowAgreement} />
        ))}
      </Switch>
    );
  }

///// some code 
  );
};

对我来说重要的是将setShowAgreement作为道具传递给路由。 如何在react-router v6中实现这一点？ 我浏览了文档，方法非常不同，我找不到翻译我的代码的方法。

Answer 1

回答。

useRoutes()接受router[] object。

在我的特定示例中：

// app.tsx
const App = () => {
      
    let element = useRoutes(routerConfig(setShowAgreement));
    
    return <>element </>
}

在 routerObjc.tsx 里面

//routerObjc.tsx
const routerConfig = (setShowAgreement?: ()=>void ) => [

  {
    path: '/documents',
    element: <Documents setShowAgreemnt={setShowAgreemnt}/>/> 
  },
  {
    path: '/profile',
    element: <Profile setShowAgreemnt={setShowAgreemnt}/> ,
  },