how fix Cannot read properties of undefined (reading 'pathname')

Question

how i fix Cannot read properties of undefined (reading 'pathname')? router dom verision "react-router-dom": "^6.2.1", error description like this

TypeError: Cannot read properties of undefined (reading 'pathname') at FilmDetail.getDataDetail (FilmDetail.js:15:1) at FilmDetail.componentDidMount (FilmDetail.js:31:1) at commitLifeCycles (react-dom.development.js:20663:1) at commitLayoutEffects (react-dom.development.js:23426:1) at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1) at invokeGuardedCallback (react-dom.development.js:4056:1) at commitRootImpl (react-dom.development.js:23151:1) at unstable_runWithPriority (scheduler.development.js:468:1) at runWithPriority$1 (react-dom.development.js:11276:1)

App.js

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

function App() {
  return (
    <div className="App">
       <Router>
      <Routes>
        <Route path="/" element={<Navbar />}>
          <Route index element={<Home />} />
          <Route path="/detail/:id" element={<FilmDetail />} />
          <Route exact  path="/film" element={<About />} />
        </Route>
      </Routes>
    </Router>
    </div>
  );
}

export default App;

Film.js

import axios from "axios";
import React from 'react';
import { Link } from "react-router-dom";

class Film extends Component {
  getDataCarousel = async () =>{
    try{
      await axios
      .get(API,{crossDomain:true})
      .then((res) => {
        this.setState({ dataFilm: res.data.slice(0,20),
          loading:false
        })
      })
      }
      catch(error)  {
        console.log("error", error);
        
      }
  }

  componentDidMount =() => {
    this.getDataCarousel()
  }
render(){
return(
  {this.state.dataFilm.map((item,index) => (
            <div className="Card col-lg-3" key={index}  >
                <Link to={`/detail/${item.id}`} style={{textDecoration:'none'}}>
<Card>
</Link>
</div>
)
}

export default Film;

FilmDetail.js

import React, { Component } from "react";
import axios from "axios";


class FilmDetail extends Component {
  constructor(props){
    super(props)
  this.state = {
    filmDetail: [],
  }
  }

  getDataDetail = async () => {
    try {
      let id = this.props.location.pathname.split('/')[2]    //error pointing here
      // console.log(id)
      await axios.get(`http://api/shows/${id}?embed=cast`, {crossDomain:true})
      .then( (res) => {
          console.log(res.data)
          this.setState({
            filmDetail: res.data,
          })
      })
  }
  catch(error){
      console.log(error)
  }
  }

  componentDidMount = () => {
    this.getDataDetail()
  }

  render() {
    const { filmDetail} = this.state

    return (
      <>
      <h1>Detail Film</h1>
      <p>{filmDetail.name}</p>
      {/* <p>{filmDetail.genres}</p> */}
     {/* <img src={filmDetail.image?.medium} alt="helo"/> */}
      </>
    );
  }
}

export default FilmDetail;

score 0 · Answer 1 · answered Feb 04 '22 at 10:38

0

<Route
  path='/detail/:id'
  render={(props) => (
    <FilmDetail {...props}  />
  )}
/>

If you do this then the props from the react router will be passed into your FilDetail Component. Generally when people are setting auth guards for their routes they use this logic.

answered Feb 04 '22 at 10:38

Aashish Peepra

176
2
8

when i try this it shows error: index.tsx:25 Matched leaf route at location "/detail/1" does not have an element. This means it will render an with a null value by default resulting in an "empty" page. – mprv Feb 04 '22 at 10:42
I don't know what's inside your index.tsx file , take a look on this blog https://ui.dev/react-router-pass-props-to-components/ I'm pretty sure you can figure it out from this. – Aashish Peepra Feb 04 '22 at 10:44
is this part correct? ` let id = this.props.location.pathname.split('/')[2]` – mprv Feb 04 '22 at 10:46
Why don't you just console.log(this.props.location) and verify if "location" object has been send as props from the router. If not you have to use render along with the syntax I showed above. – Aashish Peepra Feb 04 '22 at 10:48
console.log(this.props.location) undefined bro – mprv Feb 04 '22 at 15:42
This means that you are not receiving the props from the router. Can you show me your router.js after you tried the syntax I showed above? There's one more way }/> – Aashish Peepra Feb 04 '22 at 15:48
}> } /> ( )} /> } /> – mprv Feb 04 '22 at 16:04
if i use this ( )} /> warning: index.tsx:25 Matched leaf route at location "/detail/3" does not have an element. This means it will render an with a null value by default resulting in an "empty" page. – mprv Feb 04 '22 at 16:07
https://stackoverflow.com/questions/42010053/react-router-this-props-location Try this – Aashish Peepra Feb 04 '22 at 16:12
Not working in bro – mprv Feb 04 '22 at 16:29

how fix Cannot read properties of undefined (reading 'pathname')

1 Answers1