<Route path = "chats/:id" element = {<Chat />} />
import React from "react";
export default class Chat extends React.Component {
render() {
return (
<>
{this.props.match.params.id}
</>
)
}
}
Если я использую это, я получаю только белый сайт и следующую ошибку:
Chat.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'params')
at Chat.render (Chat.js:6:1)
at finishClassComponent (react-dom.development.js:20487:1)
at updateClassComponent (react-dom.development.js:20433:1)
at beginWork (react-dom.development.js:22366:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1)
at invokeGuardedCallback (react-dom.development.js:4270:1)
at beginWork$1 (react-dom.development.js:27243:1)
at performUnitOfWork (react-dom.development.js:26392:1)
at workLoopSync (react-dom.development.js:26303:1)
Как я могу заставить это работать? Ни учебник, ни гугление не помогли.
(Я использую react-router-dom v6)
Эй, вы должны обернуть компонент класса в функцию withRouter
(если вы используете версию старше v6)
@moonwave99 Я не использую функции. Я использую классы.
@LevayaPochta Я использую v6.
@Jak2k, тогда вам нужно написать обертку над компонентом класса и передать оттуда реквизиты
Проверьте это из документов
Вы можете использовать withRouter для этого. Просто оберните свой экспортированный классифицированный компонент внутри withRouter, а затем вы можете использовать this.props.match.params.id для получения параметров.
импортировать withRouter из реагирующего маршрутизатора
import { withRouter } from "react-router";
оберните компонент класса withRouter
import React from "react";
class Chat extends React.Component {
render() {
return (
<>
{this.props.match.params.id}
</>
)
}
}
export default withRouter(Chat)
для реактивного маршрутизатора v6 используйте пользовательскую оболочку
import {
useLocation,
useNavigate,
useParams,
} from "react-router-dom";
function withRouter(Component) {
function ComponentWithRouterProp(props) {
let location = useLocation();
let navigate = useNavigate();
let params = useParams();
return (
<Component
{...props}
router = {{ location, navigate, params }}
/>
);
}
return ComponentWithRouterProp;
}
реагировать маршрутизатор v6 с маршрутизатором
экспорт «withRouter» (импортированный как «withRouter») не был найден в «реагировании-маршрутизаторе» (возможные экспорты: MemoryRouter, Navigate, NavigationType, Outlet, Route, Router, Routes, UNSAFE_LocationContext, UNSAFE_NavigationContext, UNSAFE_RouteContext, createPath, createRoutesFromChildren, generatePath, matchPath, matchRoutes, parsePath, renderMatches, resolvePath, useHref, useInRouterContext, useLocation, useMatch, useNavigate, useNavigationType, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes)
Я бы рекомендовал использовать хук useParams
для этого варианта использования. Однако вам придется использовать функциональный компонент. В итоге это будет выглядеть так:
import React from 'react';
import { useParams } from 'react-router';
export default function Chat() {
const params= useParams()
return <>{params.id}</>
}
Документы react-router@v6 предоставляют оболочку
// withRouter.js
import {
useLocation,
useNavigate,
useParams,
} from "react-router-dom";
function withRouter(Component) {
function ComponentWithRouterProp(props) {
let location = useLocation();
let navigate = useNavigate();
let params = useParams();
return (
<Component
{...props}
router = {{ location, navigate, params }}
/>
);
}
return ComponentWithRouterProp;
}
export default withRouter
Тогда просто используйте его
import React from "react";
import withRouter from './withRouter';
export default withRouter(class Chat extends React.Component {
render() {
return (
<>
{this.props.router.params.id}
</>
)
}
})
Я пробовал, но: Uncaught TypeError: невозможно прочитать свойства undefined (чтение «параметров»)
@Jak2k, Извини не заметил, воспользуйся this.props.router.params.id