react-router v6包装的路由组件不起作用[重复]答案

【问题标题】：react-router v6 wrapped route component not working [duplicate]react-router v6包装的路由组件不起作用[重复]
【发布时间】：2021-09-21 14:11:37
【问题描述】：

如何渲染组合的Route 组件

code example

上面例子的底线是在下面的代码中，Wrapped 路由永远不会渲染它的元素

const App = () => (
      <Routes>
        <Wrapped/>
        <Route path="/inline" element={<span >Inline works</span>} />
      </Routes>
);

const Wrapped = () => <Route path="/wrapped" element={<span>wrapped</span>} />

有没有办法使用带有 react-router v6 的 Route 组件进行这种组合？还是 react-router v6 只支持Route 直接嵌套在Routes 组件中？

编辑，更具体地说，我正在尝试获得使用ProtectedRoute 组件的建议，其中包括：

type Props  = {
  element: ReactElement;
  redirectRoute: string;
} & RouteProps;

const ProtectedRoute = ({element, redirectRoute, ...rest}: Props) => {
  const {isAuthenticated} = useAuth();
  <Route {...rest} element={isAuthenticated() ? element : <Navigate to={redirectRoute}/>}/>
}

编辑：似乎这曾经在旧的 beta 版本中工作，所以这可能是一个错误。目前最新版本是 6.0.0-beta.4 & 我记录了一个问题： https://github.com/remix-run/react-router/issues/8066

【问题讨论】：

请在问题本身中包含相关代码。还要描述你为什么说不起作用 - 它是否会引发错误等。
它不会渲染路线，为了清楚起见，我已经编辑了问题。

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

在您的代码中，您尝试将 Wrapped Component 用作路由器，但事实并非如此。它是一个返回 React Router 元素的 React 元素。由于在这个简单用例中您只需要路由器，因此您可以将 is 视为一个函数：

<Suspense fallback={null}>
   <Routes>
      {/* Use this as a normal function, and also function name etc.,*/}
      {Wrapped()}
      <Route path="/inline" element={<span>Inline works</span>} />
   </Routes>
</Suspense>

但是，我建议不要通过尝试在路由上添加自定义来使路由复杂化，而是包装您要路由的组件。

例如，

const Wrapped = () => <Route path="/wrapped" element={<span>wrapped</span>} />;

到

<Route path="/wrapped" element={<Wrapped>wrapped component</Wrapped>} />

【讨论】：

我不明白你的意思是'你试图将包装组件用作 Router? What I'm trying to do is use composition to create an "enhanced" Route` 组件。我刚刚编辑了我的问题，也许这会为你澄清。对于ProtectedRoute 用例，您还会使用您的答案吗？

【解决方案2】：

还是 react-router v6 只支持 Route 直接嵌套在 Routes 组件中？

正确，RRv6 does not support 路由组合。相反，请尝试在 element 属性中使用您的 <Wrapped /> 组件。例如

<Route path="/foo" element={<Wrapped>/* something here */</Wrapped>} />

【讨论】：