不能从路由道具中传递props给组件

Question

我需要传递一些道具给组件"Element"在映射期间。

return <Route key={title} path={`/${path}`} element={Element} />

一切都很好，除了我不能将Elementprop转换为标签组件，如

element={<Element />}

我将得到错误:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <Cover />. Did you accidentally export a JSX literal instead of a component?

Route数组文件:

const pagesData = [
{
title: "Cover",
Element: <Cover />,
path: "/",
},
{
title: "Welcome",
path: "/Welcome",
Element: <Welcome />,
},
];

export default pagesData;

反应代码:

import {
Route,
Outlet,
Routes,
useNavigate,
useLocation,
} from "react-router-dom";
import pagesData from "./pagesData";

import { AnimatePresence } from "framer-motion";

const Router = (ChangePage) => {
const location = useLocation();
const pageRoutes = pagesData.map(
({ path, title, Element, nextPath, PreviousPath }) => {
return <Route key={title} path={`/${path}`} element={Element } />;
}
);

return (
// <AnimatePresence>
<Routes location={location} key={location.pathname}>
{pageRoutes}
</Routes>
// </AnimatePresence>
);
};
export default Router;

My App.js Code:

import Router from "./router/index";
import "./App.scss";
import { useNavigate } from "react";
import React from "react";
const ChangePage = ({ pathname }) => {
const navigate = useNavigate();
navigate(pathname);
};
function App() {
if (true) {
return (
<div className="App">
<div className="desktop">
<Router ChangePage={ChangePage}></Router>
</div>
</div>
);
} else {
// <Mobile></Mobile>;
}
}
export default App;

第一个触发从props传入的函数的组件

import { React, useEffect, useState } from "react";
import { Route, Routes, useNavigate, useLocation } from "react-router-dom";
function Cover({ ChangePage, nextPath, PreviousPath, bgBolor }) {
const WheelHandler = (e) => {
if (e.deltaY > 0) {
try {
setTimeout(() => {
ChangePage({ pathname: nextPath });
}, 700);
} catch (error) {
console.log(error);
}
return;
} else {
}
};
return (
<div
className="page coverPage"
onWheel={WheelHandler}
style={{ backgroundColor: bgBolor }}
>
Cover
</div>
);
}
export default Cover;

Answer 1

您需要更新pagesData数组以使用对您想要呈现的组件的引用而不是JSX文字，以便您可以在运行时传递额外的道具.

const pagesData = [
{
title: "Cover",
path: "/",
Element: Cover, // <-- component reference
.... other props
},
{
title: "Welcome",
path: "/Welcome",
Element: Welcome, // <-- component reference
.... other props
},
];

const Router = ({ changePage }) => { // <-- destructure changePage from props
const location = useLocation();
const pageRoutes = pagesData.map(({ path, title, Element, ...props }) => (
<Route
key={title}
path={path} // <-- path already includes leading "/" character
element={(
<Element
{...props}              // <-- pass "configuration" props
changePage={changePage} // <-- pass "runtime" props
/>
)}
/>
));

return (
// <AnimatePresence>
<Routes location={location} key={location.pathname}>
{pageRoutes}
</Routes>
// </AnimatePresence>
);
};

useNavigate钩子只能在React组件中使用。将changePage逻辑移到App组件中，并将useNavigate钩子移出回调。

import { useNavigate } from "react";
import React from "react";
function App() {
const navigate = useNavigate();
const changePage = ({ pathname }) => {
navigate(pathname);
};
if (true) {
return (
<div className="App">
<div className="desktop">
<Router changePage={changePage} />
</div>
</div>
);
} else {
// <Mobile></Mobile>;
}
}