在React router 5中使用变量(而不是静态组件)将props传递给组件

Question

我知道在react-router 5中，你可以像这样把一些props传递给子组件:

<Route path="/"    
exact
render={ props => <MyPage title={myTitle} dataPath={myDataPath} 
{...props} />} />

但在我的情况下，我使用路由模型:

import { ComponentType, FC } from "react";
interface RouteItem {
key: string;
title: string;
tooltip?: string;
path?: string;
component?: FC<{}>;
contentPath?: string;
enabled: boolean;
icon?: ComponentType;
subRoutes?: Array<RouteItem>;
appendDivider?: boolean;
}
export default RouteItem;

然后在配置文件(config/index.ts)中定义这些，如下所示:

// components
import DetailPageTemplate from "../pages/DetailPageTemplate";
// interface
import RouteItem from '../model/RouteItem.model';
// define app routes
export const routes: Array<RouteItem> = [
{
key: "router-detail-one",
title: "Detail One",
path: "/detail-one",
enabled: true,
contentPath: '../data/DetailOneCopy.json',
component: DetailPageTemplate,
appendDivider: true,
},
{
key: "router-detail-two",
title: "Detail Two",
path: "/detail-two",
enabled: true,
contentPath: '../data/DetailTwoCopy.json',
component: DetailPageTemplate,
appendDivider: true,
},
];

这感觉像是一个非常愚蠢的问题(我对语法不熟悉)，但我希望能够在我的App.tsx内的循环中传递这些参数中的一些，我不知道如何将props传递给组件变量(因为它不是JSX):

import React from 'react';
// components
import Layout from './components/global/Layout';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
// app routes
import { routes } from './config';
// interfaces
import RouteItem from './model/RouteItem.model';
// define app context
const AppContext = React.createContext(null);
// default component
const DefaultComponent = () => <div>No Component Defined.</div>;
function App() {
// const [useDefaultTheme, toggle] = useReduc
return (
<>
<AppContext.Provider value={null}>
<Router>
<Switch>
<Layout>
{routes.map((route: RouteItem) =>
(
<Route
key={`${route.key}`}
path={`${route.path}`}
component={route.component || DefaultComponent}
{ /*       ^ How can I pass props to the component? */ }
exact
/>
)
)}
</Layout>
</Switch>
</Router>
</ThemeProvider>
</AppContext.Provider>
</>
);
}
export default App;

Answer 1

我认为你可以使用route.component作为JSX<route.component />，但为了命名一致性(大写)，你可以先将其分配给const

{routes.map((route: RouteItem) => {
const Component = route.component;
return (
<Route
key={`${route.key}`}
path={`${route.path}`}
component={
(Component &&
((props: any) => <Component {...props} />)) ||
DefaultComponent
}
exact
/>
);
})}

https://codesandbox.io/s/react-router-dom-typescript-dynamic-component-s7n72?file=/src/index.tsx