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;

Answer 1

<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.