React this.props.match is undefined-CodePudding

This should be an easy one. How do I access props.match from within a React component class? Line 17 below contains the culprit.

Edit: I am trying to access the ID parameter from the URL. Edit again to add more relevant code

I don't believe the withRouter solution is available in the latest version of react-router-dom...

Also, useParams is not usable in a class component...

post-detail.js, see line 17

  5 class Post extends React.Component {
  6     constructor(props) {
  7         super(props);
  8         this.state = {
  9             title: '',
 10             content: ''
 11         };
 12     }
 13
 14     componentDidMount() {
 15         let api = new Api();
 16
 17         api.posts(this.props.match.params.id).then(data => {
 18             this.setState({
 19                 title: data.title.rendered,
 20                 content: data.content.rendered
 21             });
 22         });
 23     }
 24
 25     render() {
 26         let post = this.state;
 27         return (
 28             <div className='row'>
 29                 <h3>{post.title}</h3>
 30                 <div dangerouslySetInnerHTML={{__html: post.content}} />
 31             </div>
 32         );
 33     }
 34 }
 35
 36 export {Post};

app.js, see line 27

 10 class App extends React.Component {
 11
 12     constructor() {
 13         super();
 14         this.state = {
 15             posts: []
 16         };
 17     }
 18
 19     componentDidMount() {}
 20
 21     render() {
 22         return (
 23             <div className="container">
 24                 <h1>hello world</h1>
 25                 <Routes>
 26                     <Route exact path='/' element={<PostList />} />
 27                     <Route path='/post/:id' element={<Post />} />
 28                 </Routes>
 29             </div>
 30         );
 31     }
 32 }
 33
 34 export default App;

index.js

  8 ReactDOM.render(
  9     <React.StrictMode>
 10         <HashRouter>
 11             <App />
 12         </HashRouter>
 13     </React.StrictMode>,
 14     document.getElementById('root')
 15 );

CodePudding user response：

Please use withRouter.

import { withRouter } from 'react-router-dom'

....


export default withRouter(Post)

CodePudding user response：

The culprit is at <Route path='/post/:id' element={<Post />} />

Have you tried using component tag instead? Something like below

<Route path='/post/:id' component={Post} />

CodePudding user response：

It looks like you may be using version 6 of react-router-dom (latest version as of now)

You can use a hook, called useParams()

Checkout below link to get more details

https://reactrouter.com/docs/en/v6/api#useparams

CodePudding user response：

Perhaps, you're using react-router-dom at version 6.

Then, utilize useParams, code is like this.

route:

<Route path="invoices" element={<Invoices />}>
  <Route path=":invoiceId" element={<Invoice />} />
</Route>

path=":invoiceId" : thinks url 'http://site/..../invoices/123'

link:

This makes a path navigating.

   <Link
        style={{ display: "block", margin: "1rem 0" }}
        to={`/invoices/${invoice.number}`}
        key={invoice.number}
      >
        {invoice.name}
      </Link>

use:

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

export default function Invoice() {
  let params = useParams();
  return <h2>Invoice: {params.invoiceId}</h2>;
}

Please visit here and learn more. https://reactrouter.com/docs/en/v6/getting-started/tutorial#reading-url-params