응답 라우터: 정의되지 않은 속성 'pathname'을 읽을 수 없습니다.

응답 라우터: 정의되지 않은 속성 'pathname'을 읽을 수 없습니다.

이제 막 React를 배우기 시작했는데 이 오류에 빠졌어요.

Uncaughed TypeError: 새 라우터에서 정의되지 않은 속성 'pathname'을 읽을 수 없습니다.

코드는 다음과 같습니다.

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Router, IndexRoute } = require('react-router');
var hashHistory = require('react-router-redux')

var Main = require('./components/Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById('app')
);

이 튜토리얼에서는 React-Router 2.0.0을 사용하고 있습니다만, 데스크탑에서는 4.1.1을 사용하고 있습니다.변경 사항을 검색하려고 했지만 효과가 있는 솔루션을 찾지 못했습니다.

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"

위의 에러 메시지를 받았는데, 매우 이해하기 어렵습니다.언급된 다른 해결책을 시도했지만 효과가 없었습니다.

알고보니 제가 깜빡 잊고 안 넣었네요to의 하나에서 버팀목 역할을 하다<Link />구성 요소들.

에러 메세지가 개선되었으면 합니다.단순.required prop "to" not found그런 게 도움이 됐을 거예요이렇게 하면 언젠가 같은 문제를 겪은 다른 사람을 구할 수 있을 것입니다.

이 에러는 React Router v4의 api가 완전히 다르기 때문입니다.다음과 같이 시험해 보십시오.

import React from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route
} from 'react-router-dom';

const Main = () => <h1>Hello world</h1>;

ReactDOM.render(
  <Router>
    <Route path='/' component={Main} />
  </Router>,
  document.getElementById('app')
);

지금 매뉴얼을 검토하여 작동 방법에 대해 알아볼 수 있습니다.

여기 라우팅 애니메이션이 있는 리포가 있습니다.

그리고 여기 라이브 데모가 있습니다.

추가했는지 확인하세요.to에 대한 소품.<Link>그렇지 않으면 동일한 오류가 발생합니다.

추가한 후에는 다음과 같이 됩니다.-

<Link to="#">

같은 오류가 발생하여 다음에서 업데이트하여 해결했습니다.2.x.x로.4.x.x

npm install history@syslog --save

다른 원인이 있었지만, 같은 오류로 인해 이 질문을 하게 되었습니다.다른 사람에게도 같은 일이 일어나면 도움이 될 수도 있기 때문에 여기에 두는 것이 좋습니다.나에게 문제는 내가 업데이트 했다는 것이다.react-router-4및 액세스pathname변했다.

변경: (React-Router-3 이전 버전)

this.props.location.pathname

수신인: (반응-라우터-4)

this.props.history.location.pathname

React Router v6의 API가 v5의 API에서 변경되었습니다.

v6 리액트 라우터에서 페이지를 테스트할 때 "정의되지 않은 ('pathname' 읽기)"의 속성을 읽을 수 없음"에서 승인된 답변을 참조하십시오.

응용 프로그램의 모든 Link 또는 NavLink 컴포넌트를 확인합니다.이 컴포넌트 중 일부는 사용자를 다른 경로로 리다이렉트하는 'to' 속성이 없을 수 있습니다.

이 에러는, 합격해도 발생합니다.undefined또는null소품 가치to의<Link />.

라우터 대신 BrowserRouter를 라우터로 사용합니다.

Link 요소의 "to" 소품에 정의되지 않은 값을 제공하고 있습니다.

import { Link } from "react-router-dom";

const path = undefined;

function Home() {
  return (
        <Link to={path}>Home</Link> 
  );
}

알고 보니 수입과 라우터의 순서가 우선입니다.

틀렸습니다

import { BrowserRouter as Route, Router, Routes } from "react-router-dom";

맞아요.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

react-router-dom 6+에서 이 오류가 발생함

오류:

   <Routes>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/users">
        <Users />
      </Route>
      <Route path="/">
        <Home />
      </Route>
   </Routes>

솔루션:

<Routes>
   <Route exact path="/" element={<Home />} />
   <Route exact path="/about" element={<About />} />
   <Route exact path="/user" element={<User />} />
</Routes>

를 사용하려고 했을 때, 같은 에러가 발생했습니다.history.props('./somelink')패스명이 정의되어 있지 않다는 에러가 계속 발생하고 있습니다. 저도 '어느새'를 요.<Link></Link>를 참조해 주세요.이것이 에러의 원인입니다.이 같은 사람에게 .

react-display v6의 경우 이 작업을 수행해야 합니다(요소를 사용하여 모든 경로를 https://stackoverflow.com/a/70250612/570612에 포함).

리액트 라우터 도메인 v6에서 도움이 될 수 있습니다.

import {  BrowserRouter as Router,  Routes,  Route} from "react-router-dom"

언급URL : https://stackoverflow.com/questions/43620289/react-router-cannot-read-property-pathname-of-undefined