Как передать n количество реквизитов через компонент-оболочку с помощью React Router v6
Я пытался:
element: <ProtectedRoute component = {ProjectBoard} prop1 = {prop1} prop2 = {prop2}/>
Я получаю сообщение об ошибке Тип '({ prop1, prop2 }: Props) => JSX.Element' не может быть назначен типу 'ComponentType <{}>'.
element: <ProtectedRoute component = {<ProjectBoard prop1 = {prop1} prop2 = {prop2}></ProjectBoard>}/>
И затем я получаю сообщение об ошибке. Тип «Элемент» не может быть назначен типу «ComponentType <{}>».
///// ProtectedRoute.tsx
interface ProtectedRouteProps {
component: ComponentType;
}
export const ProtectedRoute: React.FC<ProtectedRouteProps> = ({
component,
...args
}) => {
// HOC from Auth0, the component I want to pass props to is passed here
const Component = withAuthenticationRequired(component, {
onRedirecting: () => (
<div></div>
),
})
return <Component {...args}></Component>;
}
///// app,tsx
const myComponenet = (age: number) => {
return <p>{age}</p>
}
// I want to pass in the props though my router here
const router = createBrowserRouter([
{
path: '/myComponent',
element: <ProtectedRoute component = {myComponenet} age = {someState} />,
}
])
Я хочу передать реквизиты и передать их в myComponent. Или какой-либо другой способ получить состояние с текущего уровня в любой компонент, отображаемый с помощью
@DrewReese Я пытался улучшить свой пример, не могли бы вы его проверить? -Что касается розетки, вы говорите, что лучше просто отправить любой маршрут, который я хочу защитить, в розетку, которая находится внутри <ProtetedRoute>?
Есть ли здесь проблема с передачей реквизита компоненту element: <ProtectedRoute component = {myComponenet} age = {someState} />? в чем именно проблема?: Просто объявление proptypes?
@DrewReese Да, в этом проблема, кажется, так нельзя. Если у «myComponents» нет реквизитов, он будет работать, но если в myComponent есть какие-либо реквизиты, я получаю сообщение об ошибке «Тип» (возраст: число) => JSX.Element не может быть назначен типу «ComponentType<{}>». ` Кажется, это ошибка типа, но если я проигнорирую ошибки и загружу свое приложение, свойства, похоже, вообще не будут проходить.
@DrewReese EDIT: теперь он работает нормально, но все еще с ошибками машинописи, я думаю, это просто проблема с типом.
Во-первых, MyComponent принимает объект реквизита, а не числовой тип, поэтому правильным типом компонента будет const MyComponenet = ({ age }: { age: number }) => { ... }, но он все равно не пройдет мимо интерфейса ProtectedRouteProps, как и ожидалось.
Ответы 1
В интерфейсе ProtectedRouteProps отсутствует реквизит age, но более того, я не думаю, что есть прямой способ ввести вариативные реквизиты неизвестного типа и подсчитать.
Однако я не вижу особого смысла в этом компоненте ProtectedRoute, поскольку он только украшает компонент. Вы должны сначала декорировать компоненты и экспортировать декорированный компонент. Отсюда вы можете установить конфигурацию маршрутов и передать реквизиты непосредственно компонентам, которым они нужны.
Пример:
MyComponent.tsx
interface MyComponentProps {
age: number;
// and any other props the component consumes
}
const MyComponent = ({ age }: MyComponentProps) => {
return <p>{age}</p>
}
export default withAuthenticationRequired(MyComponent, {
onRedirecting: () => (
<div></div>
),
});
App.tsx
import { createBrowserRouter } from 'react-router-dom';
import MyComponent from '../path/to/MyComponent';
const router = createBrowserRouter([
...
{
path: '/myComponent',
element: <MyComponent age = {someState} />, // <-- pass all the props necessary
}
...
]);
element: <ProtectedRoute component = {ProjectBoard} prop1 = {prop1} prop2 = {prop2}/>наиболее близок к имеющемуся у вас коду, но это зависит от того, как были введены реквизиты компонентаProtectedRoute. Какую цель на самом деле представляет ваш компонентProtectedRoute, который не может быть достигнут путем непосредственной упаковки каждого маршрутизируемого компонента, который вы хотите внедрить при экспорте реквизитов «требуется аутентификация»? КомпонентProtectedRouteдействительно должен отображатьOutlet. Можете ли вы предоставить более полный минимально воспроизводимый пример?