我沒有在我的 App 組件中硬編碼我的路由，而是定義了一個 Routes.ts 檔案：
import Login from "../components/Login/Login";
import Dashboard from "../components/Dashboard/Dashboard";
import PageNotFound from "../components/PageNotFound/PageNotFound";
import {ReactElement, ReactNode} from "react";
const routes: Array<{
path: string,
component: ReactElement,
is_private: boolean
}> = [
{
path: '/',
component: Login,
is_private: false
},
{
path: '/dashboard',
component: Dashboard,
is_private: true
},
{
path: '/*',
component: PageNotFound,
is_private: false
}
];
export default routes;
然后我像這樣使用：
const App: React.FC = () => {
return (
<div className="wrapper">
<h1>My App</h1>
<BrowserRouter>
<Routes>
{routes.map((route) => (
<Route path={route.path}
key={route.path}
element={route.component} />
))}
</Routes>
</BrowserRouter>
</div>
);
}
但是，由于我的組件屬于型別，React.FC我無法讓它們滿足 ReactElement 型別：
TS2739: Type 'FunctionComponent<{}>' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>': type, props, key
我試過了：
- 將組件更改為 JSX.Element
- 組件：反應節點
- 組件：FC
但是這些都不起作用，因為我的組件 (FC) 的型別和 Route.element (ReactElement) 預期的型別不可調和。
我什至嘗試將組件更改為any型別，它確實可以編譯，但會導致運行時錯誤：
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
有人會這么好心地將我推向正確的方向嗎？
uj5u.com熱心網友回復：
要使您的routes陣列允許任何型別的組件（FC 或其他），您可以將型別設定為React.JSXElementConstructor. 這可以避免將所有組件定義為FC. 這種型別接受道具的引數，但如果你不關心道具，你可以將它設定為any：
const routes: Array<{
path: string,
component: React.JSXElementConstructor<any>,
is_private: boolean
}> = [
uj5u.com熱心網友回復：
為什么你在你的路由陣列中輸入你的組件ReactElement？您是否嘗試過使用FC？
宣告這是一個 ReactElements 陣列將與 ReactRouters 預期型別發生沖突。但是，我猜您的頁面組件實際上是 React.FC 型別？
import Login from "../components/Login/Login";
import Dashboard from "../components/Dashboard/Dashboard";
import PageNotFound from "../components/PageNotFound/PageNotFound";
import {FC, ReactNode} from "react";
const routes: Array<{
path: string,
component: FC,
is_private: boolean
}> = [
{
path: '/',
component: Login,
is_private: false
},
{
path: '/dashboard',
component: Dashboard,
is_private: true
},
{
path: '/*',
component: PageNotFound,
is_private: false
}
];
const App: React.FC = () => {
return (
<div className="wrapper">
<h1>My App</h1>
<BrowserRouter>
<Routes>
{routes.map((route) => (
<Route path={route.path}
key={route.path}
element={route.component as } />
))}
</Routes>
</BrowserRouter>
</div>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/352877.html