Блог

Ошибка, возникающая в следующем коде

история,местоположение.имя пути выдает ошибку.(номер строки — 3 и 6)

 const LinkList = () =gt; {  const history = useHistory();  const isNewPage = history.location.pathname.includes(  'new'  );  const pageIndexParams = history.location.pathname.split(  '/'  );  const page = parseInt(  pageIndexParams[pageIndexParams.length - 1]  );  

Я перепробовал все приведенные решения, но ошибка все равно возникает.

App.js

 const App = () =gt; {  return (  lt;div className="center w85"gt;  lt;Header /gt;  lt;div className="ph3 pv1 background-gray"gt;  lt;Routesgt;  lt;Route exact path="/" render={() =gt; lt;Redirect to="/new/1" /gt;} /gt;  lt;Route exact path="/create" element={lt;CreateLink /gt;} /gt;  lt;Route exact path="/login" element={lt;Login /gt;} /gt;  lt;Route exact path="/search" element={lt;Search /gt;} /gt;  lt;Route exact path="/home" element={lt;LinkList /gt;} /gt;  lt;Route  exact  path="/new/:page"  element={lt;LinkList /gt;}  /gt;  lt;/Routesgt;  lt;/divgt;  lt;/divgt;  ); };  

Зависимости:

 "react-router": "^5.2.0",  "react-router-dom": "^6.0.2",  

В react-router-dom нем больше нет useHistory крючка, он был заменен useNavigate крючком, который возвращает navigate функцию вместо history объекта.

Чтобы получить текущее местоположение, используйте useLocation крючок. Вы должны были уже использовать location объект вместо history объекта в любом случае в соответствии с документами v5, поскольку history объект является изменяемым.

 const LinkList = () =gt; {  const { pathname } = useLocation();   const isNewPage = pathname.includes('new');  const pageIndexParams = pathname.split('/');  const page = parseInt(  pageIndexParams[pageIndexParams.length - 1]  );   ...  

Вы также, вероятно, можете удалить react-router зависимость, так react-router-dom как обычно реэкспортируете все react-router компоненты или, как минимум, также перенесете ее на v6, чтобы между ними не было конфликта версий.

Redirect был заменен Navigate компонентом в RRDv6, новый синтаксис для отображения перенаправления выглядит следующим образом:

 lt;Route path="/" element={lt;Navigate to="/new/1" replace /gt;} /gt;  

Кроме того, в RRDv6 все пути маршрута теперь всегда точно совпадают, exact опора не является частью API Route компонентов.

вы можете использовать либо крючок для размещения, либо окно.Расположение.имя пути для доступа к имени пути

useLocation возвращает объект текущего местоположения. пусть location=useLocation() пусть путь=местоположение.имя пути